Velocity和jQuery.animate的工作方式类似，也是用来实现JavaScript动画的一个很棒的选择，代码如下：

    let APPComponent={
        template:`
           <div>
                <button @click="show = !show">
                    Toggle
                  </button>
                  <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
                    <p v-if="show">
                      Demo
                    </p>
                </transition>
           </div>
        `,
                data(){
            return {
                show:false
            }
        },
        methods:{
            //过渡进入之前的组件状态
            beforeEnter(el){
                el.style.opacity = 0
                el.style.transformOrigin = 'left'
            },
            //过渡进入完成时的状态
            enter(el, done){
                Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
                Velocity(el, { fontSize: '1em' }, { complete: done })
             },
                       // 过渡离开完成时的状态
            leave(el, done) {
                Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
                Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
                Velocity(el, {
                    rotateZ: '45deg',
                    translateY: '30px',
                    translateX: '30px',
                    opacity: 0
                }, { complete: done })
            }
        }
    };
      new Vue({
        el:"#app",
        template:`
                <APPComponent></APPComponent>
        `,
        components:{
            APPComponent
        }
    })