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过度动画的使用方法整理