动画-小球动画每次重新开始的位置说明
一、 小球动画每次重新开始的位置说明
本节主要解决以下疑问：为什么每一次点完动画，小球都是从同一位置出发，到同一位置。因为每一次动画结束，我们都调用了相同的函数，每一次点击都重新开始执行新的一轮动画函数生命周期，代码如下：
afterEnter(e1){
//动画开始之后，会调用afterEnter
// console.log(‘OK’)
This.flag = !this.flag_
调用这个函数可以让小球从页面的展示变为隐藏，虽然此时还不能看见小球但可以查看得知它还在该位置。
before-enter="beforeEnter
"enter="enter”
after-enter="afterEnter">
<div class=“ball" v-show="flag"></div>
</transition>
</div>
beforeEnter(e1) {
// beforeEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
//设置小球开始动画之前的，起始位置
e1.Istyle.transform = "translate(0,0)",
},_
这里一瞬间可将该小球转移位置，这个时候的小球仍然看不见，一瞬间它被重置为零,接下来进行二层动画。
e1.offsetwidth
// enter表示动画开始之后的样式，这里，可以设置小球完成动画之后的，结束状态e1.style.transforn = "translate (150px,450px)"_I
e1.style.transition = 'all 1s ease'
设置它的大小
这也是为什么用户每次使用都需重新开始。
