一、Transition 介绍

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

• <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。
• <TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。

简单地说，就是当元素发生变化，比如消失、显示时，添加动画让它更自然过渡。

它是 vue 内置组件，不需要引入注册就可以直接使用。

二、默认过渡类名

transition 提供六个钩子函数，提供给我们在不同时机编写相应的动画效果。以下是此六个钩子函数执行时机

• v-enter：进入过渡开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
• v-enter-active：进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• v-enter-to:进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
• v-leave: 离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
• v-leave-active：离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

图示：

三、自定义过渡类名

通过name可以自定义<Transition>的过渡类名。对应的过渡类的名字，也要随之改变

<Transition name="diy">
  <div>xxxxx</div>
</Transition>

.diy-enter-active,
.diy-leave-active {
  transition: opacity 0.5s ease;
}
.diy-enter-from,
.diy-leave-to {
  opacity: 0;
}

四、过渡模式

在之前的例子中，进入和离开的元素都是在同时开始动画的，因此我们不得不将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。

然而，很多情况下这可能并不符合需求。我们可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的，好在我们可以通过向 <Transition> 传入一个 mode prop 来实现这个行为：

<Transition mode="out-in">
  ...
</Transition>

<Transition> 也支持 mode="in-out"，虽然这并不常用。

五、过渡时间

duration 属性设置过渡持续的时间，单位是毫秒。

<Transition :duration="550">
  ...
</Transition>

六、使用 Key Attribute 过渡

有时为了触发过渡，你需要强制重新渲染 DOM 元素。

以计数器组件为例：

<script setup>
import { ref } from "vue";
const count = ref(0);

setInterval(() => count.value++, 1000);
</script>
<template>
  <Transition>
    <span :key="count">{{ count }}</span>
  </Transition>
</template>

如果不使用 key attribute，则只有文本节点会被更新，因此不会触发过渡动画效果。但是，有了 key 属性，Vue 就知道在 count 改变时创建一个新的 span 元素，因此 Transition 组件有两个不同的元素在它们之间进行过渡。

七、自定义过渡 class

你也可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如 Animate.css：

八、Js 过渡钩子

你可以通过监听 <Transition> 组件事件的方式在过渡过程中挂上钩子函数：

在使用仅由 JavaScript 执行的动画时，最好是添加一个 :css="false" 。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。除了性能稍好一些之外，还可以防止 CSS 规则意外地干扰过渡效果.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
  :css="false"
>
  <!-- ... -->
</Transition>

// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done();
}

// 当进入过渡完成时调用。
function onAfterEnter(el) {}

// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done();
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}

// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24