动画-小球动画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。这就代表每次只执行前半场动画。
