开发者学堂课程【Vue.js 入门与实战：动画-小球动画每次重新开始的位置说明】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8169
动画-小球动画每次重新开始的位置说明
一、 小球动画每次重新开始的位置说明
本节主要解决以下疑问：为什么每一次点完动画，小球都是从同一位置出发，到同一位置。因为每一次动画结束，我们都调用了相同的函数，每一次点击都重新开始执行新的一轮动画函数生命周期，代码如下：
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'
设置它的大小
这也是为什么用户每次使用都需重新开始。
