Vue中CSS动画原理
动画流程：(动画从无到有)
1.在动画即将被执行的一瞬间，会往内部的 div 添加 两个 class 名字，分别是 fade-enter 和 fade-enter-active;
2.当动画第一帧执行结束后，transition 标签分析知道这个 div 的动画效果，会在动画第二帧时做两件事：将之前添加的 fade-enter这个 class 标签去掉，再增加 fade-enter-to 这个标签；
3.动画继续执行，执行到结束的这一瞬间，Vue 会将之前添加的 fade-enter-active 和 fade-enter-to 去掉
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >Vue中CSS动画原理</ > < src="./vue.js"></ ></head><body> <div id ="root"> <transition name="fade"> <div v-if="show">hello world</div> </transition> <button @click="handleClick">切换</button> </div> < > var vm = new Vue({ el:'#root', data: { show:true }, methods:{ handleClick: function(){ this.show = !this.show } } }) </ ></body></html>输出：点击 hello world 消失
以上述程序为例，当 div 被 transition 标签包裹时，会自动创建一个动画流程；在动画执行前，往 div 标签上添加 fade-enter 和 fade-enter-active 这两个 class 样式；
加入以下程序
< src="./vue.js"></ > <style> .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } </style>输出：
fade-enter-active 在动画第一帧时才存在，执行到结束的这一瞬间 fade-enter-active 才会被去掉；故设置 transition:opacity;
对 opacity 进行 transition 监控，如果监控到 opacity 发生变化，则让其在 3 秒内缓慢变化；fade-enter 只在第一帧时存在，第二帧时就被移除。故结合二者来看，在第一帧时，画面处于隐藏状态（opacity：0），运行到第二帧时，fade-enter 被移除 ，这时，opacity 变为原来的默认值 1，画面要出现，fade-enter-active 中的 transition 监控到 opacity 发生变化，让其在 3 秒内完成变化，画面将在3 秒由无到有的浮现出来！
补充：fade-enter-active 和 fade-enter 中的前缀 fade 是 transition的 name 值，其默认值为 v
动画流程：(动画从有到无)
1.在动画即将被执行的一瞬间，会往内部的 div 添加 两个 class 名字，分别是 fade-leave 和 fade-leave-active;
2.当动画第一帧执行结束后，transition 标签分析知道这个 div 的动画效果，会在动画第二帧时做两件事：将之前添加的 fade-leave这个 class 标签去掉，再增加 fade-leave-to 这个标签；
3.动画继续执行，执行到结束的这一瞬间，Vue 会将之前添加的 fade-leave-active 和 fade-leave-to 去掉
再添加代码：
<style> .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 3s; } .fade-leave-to{ opacity: 0; } .fade-leave-active{ transition: opacity 3s; } </style>输出：点击 3s 后隐藏，再点击 3s 后出现
fade-leave-active 在动画第一帧时才存在，执行到结束的这一瞬间 fade-leave-active 才会被去掉；故设置 transition:opacity;
对 opacity 进行 transition 监控，如果监控到 opacity 发生变化，则让其在 3 秒内缓慢变化；fade-leave-to 在第二帧时出现，最后时才被移除。故结合二者来看，在第一帧时，画面处于显示状态（opacity：1），运行到第二帧时，fade-leave 被移除 ，这时，opacity 变为 0，画面要隐藏，fade-leave-active 中的 transition 监控到 opacity 发生变化，让其在 3 秒内完成变化，画面将在3 秒由有到无的消失！
补充：v-if 和 v-show 都可以实现上述功能
Vue 中的 CSS 动画（过渡动画）实质：通过某一时刻自动的往一些标签上增加一些样式来实现的
继续阅读与本文标签相同的文章
-
20个堪称神器的 Linux 命令行软件
2026-05-26栏目： 教程
-
面试从不曾缺席，常见算法Java版
2026-05-26栏目： 教程
-
Second_Behind_Master值
2026-05-26栏目： 教程
-
MySQL之alter ignore 语法
2026-05-26栏目： 教程
-
ConcurrentHashMap竟然也有死循环问题？
2026-05-26栏目： 教程