Vue中CSS动画原理

Vue 提供了 transition 的封装组件，transition标签意思它包裹的内容里面有一个过渡的动画效果，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

 

当一个元素被transition包裹了之后，vue会自动分析元素的CSS样式，然后构建一个显示动画的流程，在显示和隐藏的过渡中，会有6个class切换。

显示原理：

①在动画即将被执行的这一瞬间，它会往内部的div上增加2个class名字，分别是fade-enter和fade-enter-active

②当动画第一帧执行结束之后，transition 这个标签vue分析过，知道它是一个动画效果，vue会在动画效果运行到第二帧的时候，帮助我们干2件事，会去掉之前添加的fade-enter然后再增加fade-enter-to这个class的名字

③动画执行到结束的这一瞬间，vue会把之前添加的 fade-enter-to 和fade-enter-active这两个class去除掉

 

 

隐藏原理：

同显示原理一样，切换的3个class名字分别为fade-leave、fade-leave-active和fade-leave-to。

 

下面这段代码，是点击按钮实现hello world显示与隐藏

<div id="root">
    <div v-if="show">hello world</div>
    <button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

hello world显示与隐藏的时候想要加一个渐隐渐现的动画效果，需要在外面套一层transition标签

由于vue中CSS动画原理，只需要在CSS中给fade-enter和fade-enter-active分别添加样式就能实现显示的动画效果：

.fade-enter{
    opacity: 0;
}
.fade-enter-active{
    transition: opacity 3s;
}
<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

代码解析：对opacity进行一个transition的监控，如果监控到opacity发生变化，会让opacity在3s内慢慢从0发生到opacity对应的值。动画即将被执行时，vue会在dom标签上添加2个class为fade-enter，fade-enter-active，动画运行时fade-enter就会被移除，css效果opacity: 0就会变成opacity: 1实现了显示效果，直到动画执行完fade-enter-active才会被移除，

 

给fade-leave-to和fade-leave-active分别添加样式就能实现隐藏的动画效果：

.fade-leave-to{
    opacity: 0;
}
.fade-leave-active{
    transition: opacity 3s;
}
<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">按钮</button>
</div>
let vm = new Vue({
    el: '#root',
    data: {
        show:true
    },
    methods: {
        handleClick(){
            this.show = !this.show
        }
    }
})

代码解析：对opacity进行一个transition的监控，如果监控到opacity发生变化，会让opacity在3s内慢慢从0发生到opacity对应的值。从显示状态变成隐藏状态，则css效果opacity: 1就会变成opacity: 0实现了隐藏效果，所以需要给它添加一个fade-leave-to的样式。

 

注意：因为以上代码的transition标签命名为fade，所以class名字以fade-开头，实际上默认以v-开头