动画-钩子函数实现小球半场动画|学习笔记

Cleane.  .ball
Width:15px
Height:15px
Border-radius:50％
Background-color：red;
}
＜/style＞
＜/head＞
＜body＞
＜div id=“app”＞
＜div class=“ball”＞＜/div＞
＜/div＞

＜body＞
＜div id=“app”＞
＜input type=“button” value=“快到碗里来”@click=“！flag”

＜body＞
＜div id=“app”＞
＜input type=“button” value=“快到碗里来”@click=“！flag”
＜！--1.使用 transition元素把小球包裹起来--＞
＜/transition
@before-enter=“”
@enter=“”
@after-enter=“”＞
＜div class=“ball”＞＜/div＞
＜/div＞
＜acript＞
Vue.directive（’focus’,function(el){}）
Var vm=new vue{{
el :“app”,
Data:(
Flag:false
},
Methods:{
//注意：动画钩子函数的第一个参数；el。表示要执行动画的那个DOM元素，是个原生的JS.DOM对象
//大家可以认为，el是通过document.getelement.BYid(’’)方式获取的原生JS.DOM对象
//beforeenter 表示动画入场之前，此时，动画尚未开始，可以在beforeenter中，设置元素开始动画之前的起始样式。
小球在动之前需要有一个启示位置，启示需要通过以下代码实现，代表小球在开始前在0.0位置：
el.style.transform=“transition（0,0）”
}，
beforeEnter(el){],
enter(el){}.
//enter表示动画开始之后的样式，这里，可以设置小球完成动画之后的，结束状态。
el.style.transform=“transition（0,0）”
el.style.transform=“transition（150px,450px）”
el.style.transform=“transition all is ease”
此时执行会发现，小球确实动起来，但是没有中间过渡过程。所以在这个之前需要设置El.offsetwidth，代码如下：
El.offsetwidth
//这句话，没有实际作用，但是如果不写，出不来动画效果
el.style.transform=“transition（0,0）”
el.style.transform=“transition（150px,450px）”
el.style.transform=“transition all is ease”
所以，所以通过执行，可以认为 El.offsetwidth 会强制动画刷新，这里 El.offsetwidth 不是必须的，还可以写成 El.offsetheight ，也可以写成 El.offsetleft、 El.offsettop等。只要和 El.offset 相关即可。
Afterenter(el){
//动画完成后，会调用afterenter
//console.log（‘OK’）
This.flag=！this.flag
}};
＜/script＞
执行会发现，消失需要一定的时间，如果不想存在这个时间，可以使用以下代码：
enter(el.done)
Done()
//这里的done。起始就是afterenter这个函数，也就是说：done是一个函数的引用。