vue购物车半场动画-圆球移动案例

<!-- 
    注意点：
    1.动画的生命周期钩子函数，里面的参数el，指的就是调用这个钩子函数的元素
    2.enter(el,done){}中需要添加el.offsetWidth；不添加动画不执行
    3.done()起始就是 afterEnter 这个函数，done 是 afterEnter 函数的引用
    4.afterEnter(){} 进入完成后要让小球隐藏，所以把flag取反
-->

<div id="app">
    <input type="button" value="添加" @click="flag = !flag">

    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    >
        <div class="box" v-if="flag"></div>
    </transition>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            flag:false,
        },
        methods:{
            beforeEnter(el){
                el.style.transform = 'translate(0,0)'
            },
            enter(el,done){
                el.offsetWidth;
                el.style.transform = "translate(150px, 450px)"
                el.style.transition = 'all 1s ease'
                done();
            },
            afterEnter(){
                this.flag = !this.flag
            }
        }
    });
</script>