1.CSS transition
1.1 enter动画：
hello
主要过渡类名：
xxx-enter
淡入的第一帧
xxx-enter-active
进入过度生效时的状态
xxx-enter-to
进去过渡结束的状态,一般就是原始状态。在执行完后，会将xxx-enter-active,xxx-enter-to这两个类全部移除。
p元素的执行流程：
- p元素出现在dom中
- p元素加上.fade-enter类
- 加上.fade-enter-active
- 移除.fade-enter,加上.fade-enter-to,保留.fade-enter-active
- 过度结束，移除.fade-enter-to,.fade-enter-active
1.2 leave动画
xxx-leave:
离开过渡的开始状态
xxx-leave-active:
离开过渡生效的状态
xxx-leave-to:
离开过渡的结束状态
CSS animation
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
new Vue({
el: '#example-2',
data: {
show: true
}
})
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
只需要xxx-enter-active和xxx-leave-active,然后在这两个类中添加animation
js操作动画
在对应钩子中使用Velocity的方法。其中enter和leave钩子必须使用done回掉，否则会变成同步调用，会立即结束。
多元素过渡
在transition中可以有多个元素，通过v-if 和 v-else切换出现。
new Vue({
el:'#example',
data:{
status:'on'
}
})
.fade-enter-active,
.fade-leave-active {
transition:all 1s;
}
.fade-enter{
opacity:0;
}
.fade-leave-to {
opacity:0
}
我们在transition中创建两个button,它们通过status来切换，然后在css中设置透明度。但是这样动画效果并没有生效。我们给这两个button添加key后，动画才能生效。
当相同标签名的元素切换时，需要通过设置key来让vue区分它们，否则vue只会更改它们标签内部内容。
这时，动画虽然能够正常运行了，但是一个离开过渡的时候另一个开始进入过渡，我们需要的是一个执行完成后再执行下一个。vue提供了两种过渡模式：
- in-out: 新元素先执行，完成后当前元素执行
- out-in:当前元素先执行，完成后新元素执行
列表过渡
如果需要渲染整个列表的过渡，需要使用
{{ item }}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
{
opacity: 0;
transform: translateY(30px);
}
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})