| Vue中动画的使用
Vue
的中动画，并不像想象中的那样强大，它只能控制标签或者组件的显示到隐藏，或者隐藏到显示的过程。
所以它能控制的过程有两个：
1、从显示到隐藏
2、从隐藏到显示
而Vue
的指令中，恰好有
v-if
和
v-show
正是控制元素或者标签的显示或者隐藏的，所以
vue
的动画，往往需要在标签中结合
v-if
或者
v-show
来进行使用。
下面介绍几种动画实现的方式：
1
、使用自己写类样式来实现动画
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
如何理解以上代码呢？
给了h3
外包裹了一层
transition
之后，当
h3
通过
v-if
或者
v-show
进行显示
或者隐藏的时候，Vue
会给
h3
标签增加一系列类样式。
以隐藏到显示的过程说明：
(1) v-enter
这个是
vue
在即将动画开始的一瞬间为元素增加的，然后瞬间移除。我们可以自己写一个
class
类样式就叫做
v-enter,
在
v-enter
中设置该元素在此状态下的初始值。
.v-enter{
transform:translateX(400px);
}
(2) v-enter-active
这个是在整个动画的过程中都存在的类样式。我们可以自己写一个类样式就叫做
v-enter-active,
在
v-enter-active
中设置该元素的过渡规则。
.v-enter{
transition:transform 1s linear;
}
(3) v-enter-to
这个是在整个动画的过程中都存在的类样式，但是添加该类的时机比
v-enter-active
更晚一点
.
我们可以在
v-enter-to
设置元素的目标位置。
所以总结如下：
v-enter
设置元素的初始状态
v-enter-to
设置元素的结束状态
v-enter-active
设置过渡规则
我们也可以更改类样式的前缀，将v-
中的
v
变成我们自己想要的名称，通过
name
属性指定
<transition name="haha">
<h3 v-if="flag">
这是一个
H3</h3>
</transition>
2
、使用第三方库
Animate.css
从1
中我们知道
Vue
会给
h3
标签增加一系列类样式，样式的名称默认是
v-xxx
的形式
,
如果我们想改变这些
类样式名称，让他使用Animate
中已经有的类样式名称，可以给
transition
设置
<transition
enter-active-class="bounceIn" ,
enter-to-class="haha" ,
leave-active-class="bounceOut"
:duration="{ enter: 20000, leave: 40000 }">
<h3 v-if="flag" class="animated">
这是一个
H3</h3>
</transition>
:duration
控制的不是动画的时长，而是样式存在的时长
3
、使用回调函数
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
data:{
flag:false
},
methods:{
afterEnter(){
this.flag = !this.flag
}
}
4
、列表动画
元素如果是通过v-for
方式来循环渲染，
transition
这个标签就不知道该加给谁
<transition-group appear tag="ul">
<li v-for="(item, i) in list" :key="item.id" @click="del(i)">
{{item.id}} --- {{item.name}}
</li>
</transition-group>
依然要写v-xxx
的类样式，参照动画第一种使用方式
删除元素时，其他元素会增加的类样式
.v-move {
transition: all 6s ease;
}
这个是为了让被删除的元素不占位，不占位了，它下边的元素就能往上走
而我们在v-move
中有设置了过度规则，所以会慢慢的往上走
.v-leave-active{
position: absolute;
}
appear
第一次加载的时候，给列表的所有元素执行动画
tag
：默认
transition-group
会给所包裹的标签增加一个大的父容器
span
如果由于这个span
产生了问题，比如样式运用不上等，那么我们可以修改这个值
|