可复用的动画过渡

动画复用的代码举例：

//html
<div id="app">
  <fade>
    <p>hello world!</p>
  </fade>
  <fade>
    <h1>Bye world</h1>
  </fade>
</div> 
//JS
Vue.component("fade",{
    props:["show"],
    template:`
    <transition
    appear
    @appear="handleEnter"
    @before-enter="handlerBeforeEnter"
    @enter="handlerEnter"
    @leave="handlerLeave"
    >
        <slot v-if="show">
        </slot>
    </transition>
    `,
    methods:{
    handlerBeforeEnter: function(el){
        el.style.opacity=0;
    },
    handlerEnter: function(el, done){
      Velocity(el,{opacity:1},{complete: done});
    },
    handlerLeave: function(el, done){
      Velocity(el, {opacity:0}, {complete: done});
    }
}
});

动画过渡的代码完全封装在子组件的代码中，父组件向子组件传递想要动画过渡的内容，就可以实现多次重复使用同一个动画过渡效果了。
效果：

image.gif