Vue的过渡动画如何实现？transition组件怎么用？

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>

登录后复制