Vue 中 CSS 动画原理

下面这段代码，是点击按钮实现 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
        }
    }
})

此时有一个需求，希望是在显示与隐藏时，能实现渐隐渐现的动画效果。

<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
        }
    }
})

如果希望 hello world 有一个动画效果的话，需要在外面套一层 transition 标签，意思它包裹的内容，有一个动画效果，可以给它一个名字 name="fade" 。

enter

当一个元素被 transition 标签包裹之后，Vue 会自动的分析元素的 css 样式，然后构建动画流程

在动画还没有执行的一瞬间，Vue 会帮我们在 dom 标签上添加两个 class ，分别是 fade-enter 、 fade-enter-active 。

当动画第一帧执行结束之后， transition 这个标签分析过，里面有一个动画效果，Vue 会在动画运行到第二帧的时候，会将 dom 标签上 v-enter 的 class 删除，再添加一个 v-enter-to 的 class 。

接着动画会继续执行，执行到结束的一瞬间，Vue 会干一件事，它会把之前添加的 v-enter-to 和 v-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
        }
    }
})

我们只需要在 css 中给 fade-enter 和 fade-enter-active 分别写上样式就行了。这里要注意的是 Vue 中默认以 v 开头，如： v-enter ， transition 加个 name 属性，就可以用 name 属性值做开头，如： fade-enter 。

现在这里两个 class 的意思是：

动画还没执行时，就已经有 fade-enter ， fade-enter-active ，动画第一帧运行时 fade-enter 就会被移除， css 效果 opacity: 0 就会变成 opacity: 1 ，直到动画执行完 fade-enter-active 才会被移除，这期间它用 transition 对 opacity 进行监控，需要 3s 才能完成。

leave

隐藏的动画流程：

隐藏的第一个瞬间时，Vue 会在 dom 上添加两个 class ，分别是 v-leave 和 v-leave-active

运行到第二帧时，Vue 会将 v-leave 移除，再添加一个 v-leave-to

接着动画会继续执行，执行到结束的一瞬间，Vue 会把之前添加的 v-leave-to 和 v-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
        }
    }
})

为什么加了这两个 css 动画效果就出来了呢？

从动画执行的第一个瞬间，到动画执行完毕， fade-leave-active 这个 class 都存在。也就是在动画运行过程中，我要时刻监听 div 的 opacity ，一旦 opacity 发生变化，我要让让他在 3s 内执行完毕。

在第一个瞬间 fade-leave 的 opacity 为 1 ，就是显示状态；第二个瞬间 opacity 为 0 了，此时要给它添加一个 fade-leave-to 的 class ，而 fade-leave-active 一直在监听 opacity 的变化，一旦 opacity 发生变化，会让它在 3s 内完成

总结

在 transition 标签中中不光 v-if 能控制显示隐藏， v-show 也能控制显示隐藏，甚至动态组件也行。只要在 transition 中标签中动画发生变化，都会有一个过渡效果