vue css动画过渡原理
1. 先看一个 使用vue css动画过渡原理 实现显示隐藏的例子
<div id="app">
<button @click='clickHandle'>toggle</button>
<transition name='fade'>
<div v-if='show'>hello world</div>
</transition>
</div>
<style>
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 4s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 1s;
}
</style>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
clickHandle: function(){
this.show = !this.show
}
}
})
</script>
========================== 这是分割线==================================
2.过渡的Class类名
下面两图展示的是,vue的动画时间轴上,对于动画类名的添加和删除,以达到实现动画的效果。
简单地说就是 active 会伴随 enter/leave 的整个过程,v-enter 与 v-leave 存在的时长只都有 一帧 ,所以用肉眼看v-enter-to与v-enter-active几乎是同时出现,同时消失的。
========================== 这是分割线==================================
3.容易出现的问题
<div id="app1">
<button @click='clickHandle'>toggle</button>
<transition name='hidden'>
<div v-if='show'>hello world</div>
</transition>
</div>
<style>
.hidden-enter-to{
opacity: 0;
}
.hidden-enter-active{
transition: opacity 4s;
}
</style>
<script>
var vm1 = new Vue({
el: '#app1',
data: {
show: true
},
methods: {
clickHandle: function(){
this.show = !this.show
}
}
})
</script>
<xmp>
.fade-enter-to{
opacity: 0;
}
.fade-enter-active{
transition: opacity 4s;
}
如果用这种方法来写进入动画,则进入动画会出现 “闪烁” 效果,而这种效果却并不是我们所期望的
原因在于:动画过程为:
1.动画开始前 opacity: 1;
2.第二帧开始 opacity: 0;
3.而且这个从 opacity: 1; 到 opacity: 0; 的动画时间过程为 4s
4.最后,因为这是一个进入动画,所以在动画执行结束后 opacity 不得不为 1
所以,这种方法来写进入动画,就会出现 “闪烁” 效果
</xmp>
推荐另外一篇写的不错的文章
vue过度动画的使用方法整理