vue 半场动画进入状态

<style>
        .box{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: red;
        }
    </style>
    
</head>
<body>
<div id="app">
    <input type="button" value="加入购物车" @click="flag=!flag">
    <!-- 使用元素把小球包裹起来 -->
    <!--  @before-enter 动画入场之前，此时还没有入场哈
          @enter 表示动画的执行时候的状态
          @after-enter 表示动画结束之后的状态
    -->
    <transition
     @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter">
    <div class="box" v-show="flag"></div>
    </transition>
</div> 
<script>
   var vm=new Vue({
       el:"#app",
       data:{
        flag:  false
       },
       
       methods: {
        //动画钩子函数的第一个参数el   表示要执行的动画的那个DOM元素  是一个原生的BOM对象
        // 大家可以认为  el 是通过 document.getElementById来获取的哦

        beforeEnter(el){ //beforeEnte表示动画入场之前 此时动画还没有完全的开始 
        //  此时设置开始动画之前的起始样子
        el.style.transform="translate(0,0)"
        },

        enter(el,done){// enter表示动画开始之后的样子 
            el.offsetWidth  //这一句话没有实际性的作用  但是如果不写  效果就出不来
            //   你可以认为  el.offsetWidth 是让你看见动画的效果
            el.style.transform="translate(150px,450px)"
            el.style.transition="all 1s ease"
            //这里的done  起始就是afterEnter这个函数， 也就是说done是afterEnter函数的引用  它就会自动调用下面这个函数
            done()
        },

        afterEnter(el){
        //   动画完成之后 就会调用这个函数
        this.flag=!this.flag  //最终让这个小球消失  取反 让小球消失
        } 
       },
   })
</script>