vue使用钩子函数实现动画的效果

JavaScript 钩子
可以在属性中声明 JavaScript 钩子
<transition
v-on:before-enter=“beforeEnter”
v-on:enter=“enter”
v-on:after-enter=“afterEnter”
v-on:enter-cancelled=“enterCancelled”

v-on:before-leave=“beforeLeave”
v-on:leave=“leave”
v-on:after-leave=“afterLeave”
v-on:leave-cancelled=“leaveCancelled”

<input type=“button” value=“移动小球” @click=“flag=!flag”>
<transition
@before-enter=“berforeEnter”
@enter=“enter”
@after-enter=“afterEnter”>

           data(){
      			  return {
          			  flag:false,
       			 };
    		},
         methods:{
        //动画钩子函数的第一个函数，el,表示要执行动画的那个Dom元素，是个原生的JS Dom对象
          berforeEnter(el){
            //berforeEnter 表示动画入场之前，此时动画还未开始，可以在berforeEnter设置之前的样式
            el.style.transform = "translate(0,0)"
        },
        
        enter(el){
           el.offsetWidth
            //表示动画开始之后的样式，这里可以设置小球完成动画之后的结束状态
            
        el.style.transform = "translate(150px,450px)"
            el.style.transition = 'all 1s ease'
          //  el.offsetWidth
            // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
        

el.style.transform = "translate(150px, 450px)"
            this.go(el)
           // done()
        },
        afterEnter(el){
            window.console.log(el)
            window.console.log("222")
            this.flag= !this.flag

        },
        go(el){


            el.style.transform = "translate(300px,550px)"
            el.style.transition = 'all 1s ease'
            window.console.log("111")
            window.console.log(el)


        }