动画-钩子函数实现小球半场动画
目录
一、首先需要画出小球
二、添加按钮（模拟加入购物车）
三、添加动画
之前已经学过了如何使用钩子函数怎么定义动画，本节主要讲解怎么通过钩子函数模拟小球的半场动画。
代码如下：
一、首先需要画出小球
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是一个函数的引用。
当只用 JavaScript 过渡的时候，在 enter 和 leave 中，回调函数 done 是必须的，他们会被同步调用，过渡会立即完成。如果不调用 done ，函数执行时就会出现延迟等情况。
以上，已经完成了小球半场动画的全部学习。
