开发者学堂课程【Vue.js 入门与实战：动画-小球动画flag标识符的作用分析】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8183
动画-小球动画flag标识符的作用分析
目录：
一、实现小球动画复习
二、成功范例
三、失败案例分析
一、实现小球动画复习
首先设置一个小球，并为其设置设计
<style> .ball { Width:15px Height:15px Background-color:red Border-radius:50
浏览下，可以看到小球已经被创建：
接下来我们再给他做一个按钮
<input type =”button” value =”加入购物车” @click=”flag=!flag”> <div class =”ball” v-show=”flag”></div> </div> <acript> //创建VUE实例，得到Viewmodel Var vm = new Vue {{ el: ‘#app’, Data:{ Flag:false }, Methods:{} }};
刷新点击后，即可看到执行效果：
二、成功范例
上面实现了最基本的功能，接下来通过VUE的动画机制，钩子函数实现小球加入购物车的效果，如果想要实现动画的话，第一步需要把小球放到元素当中去
<html lang-"en"> <head> <cmeta charset="UTF-8"> <cmeta name="viewport"content="width=device-width,initial-scale=1.0"> <cmeta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</titlo> <script src="./lib/vue-2.4.0.js"x/script> <style> .ball { width:15px; height: 15px; background-color:red; borde-radius:50%; } </style> </head> <body> <div id="app"> <input type="button" value="加入购物车" @click="flag=!flag"> <div class="ball" v-shiw="fiag"></div> </div> <script> //创建Vue实例，得到ViewModel var Vm = new Vue({ el: '#app', data: { flag: false }, methods:{} }); </scrtipt> </body> <div id="app"> <input type="button" value="加入购物车"@click="flag=！flag"> <transition>
这时小球只有从开始位置到结束位置的过渡关系，并没有回去的过程，这个时候就需要使用钩子函数，创造半场动画，这个时候就应该使用如下代码：
@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnte"> <div class="ball" v-show="flag">/div> </transition> </div> <script> //创建Vue实例，得到 ViewModel Var vm = new Vue({ el: '#app'， data: { flag: false }， methods：{ beforeEnter(el){ el.style.transtorm = 'translate(0,0)' },
此时通过上面的代码，我们定义了小球，启示时的开场位置，以及小球最终去的离场位置。下面的代码，我们设置小球的路径数据，以及过渡属性的数据。
enter(el,done){ el.offsetWidth el.style.transform = 'translate(150px,450px)' el.style.transition = 'all’1s ease' done() }, afterEnter(el){ // this.fiag = !This.flag // el.style.opacity = 0.5
以上函数，可以使小球走到最终位置时，为隐藏状态。此时刷新点击，可看到小球成功执行。
三、失败范例分析
如果使用如下代码：
el.style.opacity = 0
此时点击也可以隐藏，也可以实现效果。但是第二次点击的时候就没有动画了，失败原因在于：
当前 opacity 设置为0与设置为0.5没有太大区别。都为二次点击时经过1s所有的时长就直接消失。
Vue把一个完整的动画，使用钩子函数，拆分为了两部分，我们使用 flag 标识符，来表示动画的切换。
刚开始，flag = false → true → false，这是，false → true 为上半场函数，true → false 为后半场函数。此时为了不让其自动执行后半场函数，需要对执行结果取非。
This.flag = ! this.flag
上面这句话，有两个功能：
第一个功能是，
控制小球的显示与隐藏
第二个功能是，
直接跳过后半场动画，让flag 动画直接变为 false
当第二次点击按钮的时候，flag = false → true。这就代表每次只执行前半场动画。
