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

野性酷女 2023-05-29 03:16 18阅读 0赞

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”

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)
    
    
            }