异常教程

vue3 transition（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，过渡动画是提升用户体验的重要手段。Vue 3 提供的 Transition 组件，为开发者提供了简洁高效的动画实现方案。无论你是希望为页面元素添加优雅的显示/隐藏效果，还是构建复杂的路由切换动画，Transition 组件都能通过直观的语法和灵活的配置满足需求。本文将从基础概念到高级用法，结合实例深入解析 Vue 3 中的过渡系统，帮助开发者快速掌握这一核心功能。

一、过渡动画的核心概念：从舞台导演到代码实现

过渡动画可以类比为一场舞台表演：元素的入场和离场需要遵循特定的“剧本”，而 Vue 的 Transition 组件正是这场表演的“导演”。它通过定义不同阶段的 CSS 类名和触发条件，控制元素在状态变化时的视觉效果。

1.1 过渡的四个关键阶段

Vue 的过渡系统将元素的生命周期划分为四个阶段：

  • 进入前（v-enter）：元素准备显示但尚未渲染时的状态。
  • 进入中（v-enter-active）：元素开始进入时的过渡状态。
  • 离开前（v-leave）：元素准备隐藏时的初始状态。
  • 离开中（v-leave-active）：元素离开过程中的过渡状态。

通过组合这些阶段的 CSS 样式，可以实现平滑的动画效果。例如，一个简单的 fade-in 动画可以通过以下步骤完成：

  1. 元素初次显示时，添加 v-enter 类（透明度为 0）。
  2. 在 v-enter-active 类中定义过渡时间，并将透明度从 0 淡入到 1。

二、基础用法：从静态过渡到动态控制

2.1 基础过渡组件的使用

Transition 组件通过包裹需要动画效果的元素实现。例如，控制一个按钮的显隐动画：

<template>
  <button @click="show = !show">Toggle</button>
  <Transition>
    <p v-if="show">Hello Vue 3 Transition!</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>

此时，Vue 会自动添加默认的 CSS 类名（如 v-enter-active）。但若希望自定义动画，需通过 name 属性修改类名前缀：

<Transition name="custom">
  <!-- 元素内容 -->
</Transition>

此时 CSS 类名会变为 custom-enter、custom-enter-active 等，便于样式管理。

2.2 CSS 过渡的实现

假设我们希望实现一个从左滑入的动画，可以编写以下 CSS：

/* 进入初始状态 */
.custom-enter-from {
  opacity: 0;
  transform: translateX(-100%);
}
/* 进入活跃状态 */
.custom-enter-active {
  transition: all 0.5s ease-out;
}
/* 离开初始状态 */
.custom-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
/* 离开活跃状态 */
.custom-leave-active {
  transition: all 0.3s ease-in;
}

通过 from 和 to 后缀，Vue 会自动在不同阶段应用对应的样式，实现元素的平滑过渡。

三、过渡类型：显式与隐式过渡的区别

Vue 的 Transition 组件支持两种过渡类型：显式过渡和隐式过渡，它们对应不同的使用场景。

3.1 显式过渡：元素的增删与切换

当元素因 v-if、v-show 或条件渲染（如 v-for）发生增删时，触发显式过渡。例如：

<Transition>
  <p v-if="condition">显示或隐藏的文本</p>
</Transition>

此时元素的生命周期完全由 Vue 控制，适合简单的显隐场景。

3.2 隐式过渡：元素的替换与状态切换

当元素因内容变化（如动态组件 component 或 key 改变）发生替换时，触发隐式过渡。例如：

<Transition name="fade">
  <component :is="currentComponent" />
</Transition>

此时需要配合 mode 属性定义过渡顺序，如 mode="out-in" 表示先隐藏旧元素再显示新元素。

四、高级技巧：JavaScript 钩子与第三方库集成

4.1 使用 JavaScript 控制过渡

对于需要动态计算或复杂逻辑的场景，可以通过 onBeforeEnter、onEnter 等钩子函数介入过渡流程：

<Transition
  @before-enter="beforeEnter"
  @after-leave="afterLeave"
>
  <!-- 元素内容 -->
</Transition>

<script setup>
const beforeEnter = (el) => {
  el.style.opacity = 0;
  el.style.transform = 'translateX(-100px)';
};
const afterLeave = (el) => {
  console.log('元素已完全离开');
};
</script>

这些钩子函数允许开发者在关键节点执行代码，例如手动触发 CSS 变化或调用第三方动画库。

4.2 集成第三方动画库（如 Anime.js）

Vue 的过渡系统与 CSS 动画深度结合，但也支持通过 JavaScript 驱动动画。例如，使用 Anime.js 实现弹跳效果：

<Transition
  @enter="animateEnter"
  @leave="animateLeave"
>
  <div class="box"></div>
</Transition>

<script setup>
import anime from 'animejs';

const animateEnter = (el) => {
  anime({
    targets: el,
    translateY: [-50, 0],
    opacity: 1,
    duration: 800,
    easing: 'easeOutBounce',
  });
};
</script>

通过这种方式，开发者可以灵活调用现成的动画库，扩展 Vue 的过渡能力。

五、常见问题与最佳实践

5.1 如何避免过渡闪烁问题？

在 Vue 3 中，若过渡元素未正确应用样式，可能会出现短暂闪烁。解决方法是：

  • 确保 v-enter-from 和 v-leave-to 中定义了初始状态（如 opacity: 0）。
  • 在 CSS 中添加 pointer-events: none 防止过渡期间误触交互。

5.2 如何调试过渡类名？

使用浏览器开发者工具的“元素”面板，观察过渡元素在不同阶段的类名变化。例如，在进入阶段，元素会依次添加 v-enter、v-enter-active，最终移除这些类名。

5.3 复杂场景下的过渡优化

对于包含多个子元素的组件（如列表），建议使用 <TransitionGroup> 组件，并通过 name 和 tag 属性定义过渡规则。例如：

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</TransitionGroup>

配合 CSS 可实现逐项滑入/滑出效果，避免整体刷新的卡顿感。

六、实际案例：实现一个动态路由切换动画

在 Vue Router 中，可以通过 Transition 组件包裹 <router-view>，为路由切换添加动画：

<template>
  <Transition name="route" mode="out-in">
    <router-view />
  </Transition>
</template>

<style>
.route-enter-from,
.route-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
.route-enter-active,
.route-leave-active {
  transition: all 0.4s;
}
</style>

此案例展示了如何将过渡系统与路由结合，为全页面切换添加流畅的上下滑动效果。

结论

Vue 3 的 Transition 组件通过简洁的 API 和强大的功能，大幅降低了实现复杂动画的门槛。从基础的 CSS 过渡到与第三方库的深度集成，开发者可以灵活选择最适合项目的方案。无论是优化用户体验的微交互，还是构建视觉震撼的页面切换效果，掌握这一工具将成为前端开发的重要技能。

建议读者通过实践上述案例，逐步探索过渡系统的更多可能性，并参考官方文档深入理解 Transition 组件的全部配置项。记住，动画设计的核心始终是服务于用户需求——让技术为体验赋能，而非喧宾夺主。

最新发布

查看更多文章