vue封装动画组件

by shuai shen

HTML

<script src="https://cdn.bootcss.com/velocity/2.0.2/velocity.js"></script>
<div id="app">
  <button @click="handleClick">toggle</button>
  <fade :show="show">
    <div>hello transition</div>
  </fade>
</div>

JavaScript

Vue.component('fade', {
  props: ['show'],
  template: `
    <transition @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @before-leave="handleBeforeLeave"
      @leave="handleLeave">
    	<slot v-if="show"></slot>
    </transition>
    `,
  methods: {
    handleBeforeEnter: function(el) {
      el.style.opacity = 0;
    },
    handleEnter: function(el) {
    	setTimeout(()=>{
        el.style.opacity = 1;
        el.style.transition = "all 2s";
      })
    },
    handleBeforeLeave: function(el) {
      el.style.opacity = 1;
    },
    handleLeave: function(el) {
    	el.style.opacity = 0;
      el.style.transition = "all 2s";
    }
  }
})
new Vue({
  el: "#app",
  data: function () {
    return {
      show: true
    }
  },
  methods: {
    handleClick: function () {
      this.show = !this.show;
    }
  }
});