vue 的过渡动画通过 transition 组件实现，用于元素插入、更新或移除时添加效果。一、transition 包裹单个元素，如 包裹一个 dom 元素，通过 v-if 控制显示隐藏，vue 会自动添加 .fade-enter-active 和 .fade-leave-active 等类名控制过渡；二、transition-group 处理列表动画，需配合 v-for 使用，每个子元素必须有 key 属性，并可通过 tag 指定渲染的标签；三、javascript 钩子可精细控制动画逻辑，如 @before-enter、@enter、@after-enter 等钩子可在动画各阶段执行自定义操作，适合结合第三方动画库使用；四、注意问题包括确保状态变化触发动画、v-show 不支持 js 钩子、name 属性影响类名前缀等要点。
Vue 的过渡动画其实主要靠 transition 组件来实现，它是一个内置组件，用来在元素插入、更新或移除时添加过渡效果。用好了这个组件，页面切换、弹窗显示这些操作就能更自然，用户体验也会更好。
一、transition 包裹单个元素，是最常见用法
通常包裹一个单独的 DOM 元素或者组件。比如你有一个按钮控制显示隐藏的提示框，就可以这样写：
<transition name="fade"> <p v-if="show">这是一个提示</p> </transition>
当 show 变为 true 或 false 时，Vue 会自动检测进入和离开的状态，并在相应阶段添加 CSS 过渡类名，比如 .fade-enter-active, .fade-leave-active 等。
立即学习“前端免费学习笔记（深入）”；
对应的 CSS：
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
注意一点：只能包裹一个根元素。如果你在里面写了多个元素，比如两个
二、transition-group 处理列表过渡动画
如果你要给 v-for 渲染出来的列表加上动画，就不能再用普通的 ，得换成 。
比如一个简单的待办事项列表：
<transition-group name="list" tag="ul">
<li v-for="item in list" :key="item.id">
{{ item.text }}
</li>
</transition-group>
这里的 tag=”ul” 指定最终渲染成哪个标签，否则默认是 。CSS 动画写法和上面类似，但要注意的一点是：使用 时，每个子元素必须有 key 属性，这是 Vue 判断元素唯一性的依据。
三、用 JavaScript 钩子做更精细控制
大多数情况用 CSS 写过渡就够用了。但如果想在动画过程中执行一些逻辑，比如在动画结束后发送请求、修改数据等，可以用 JavaScript 钩子。
支持的钩子包括：
- @before-enter
- @enter
- @after-enter
- @enter-cancelled
- @before-leave
- @leave
- @after-leave
- @leave-cancelled
举个例子，你想在元素进入时滚动到底部，可以这样写：
<transition @before-enter="beforeEnter" @enter="enter" > <p v-if="show">动态内容</p> </transition>
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
// 手动控制动画结束
setTimeout(() => {
el.style.opacity = 1;
done(); // 必须调用 done()，否则 after-enter 不会触发
}, 300);
}
}
这种写法适合需要结合第三方动画库（比如 GSAP）的情况。
四、注意几个容易出问题的地方
-
过渡状态没变化，动画不会触发
比如你只是改了某个类名，但 DOM 没有插入或移除，这时候动画可能不会运行。确保你是通过 v-if、v-show 或 v-for 来改变节点的存在状态。 -
v-show 和 v-if 的区别
支持 v-if 和 v-show，但 v-show 是通过 display 控制显隐，所以不能配合 JavaScript 进入/离开钩子一起用。 -
name 属性决定类名前缀
如果你不写 name，默认会用 v-enter、v-leave 这样的类名。建议自己指定 name，避免和其他样式冲突。
基本上就这些。Vue 的过渡机制虽然功能强大，但理解清楚生命周期钩子和类名规则之后，用起来还是很顺手的。
暂无评论内容