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