vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue过度与动画

Vue过度与动画的使用及说明

作者：咖啡の猫

本文详细介绍了Vue.js的过渡与动画机制,从基础语法到实战应用,涵盖CSS类名、JavaScript钩子、列表过渡、状态过渡等高级技巧,并提供了性能优化建议,通过系统学习,读者可以掌握如何实现流畅的页面过渡与细腻的动画效果,提升用户体验

一、前言

在现代前端开发中，用户体验 已成为衡量项目质量的重要标准。而流畅的页面过渡与细腻的动画效果，正是提升用户感知的关键一环。

Vue.js 为我们提供了强大且简洁的内置能力 —— transition 组件，让我们可以轻松实现元素的进入、离开、列表排序等动画效果，无需依赖第三方库（如 jQuery 或 Anime.js）。

本文将带你系统掌握 Vue 的过渡与动画机制，从基础语法到实战应用，一步步打造专业级交互体验。

你将学到：

二、Vue 过渡 vs 动画：概念解析

虽然我们常把“过渡”和“动画”混用，但在 Vue 中，它们有明确的区分：

概念说明
过渡（Transition）指元素在插入、更新、移除时的中间状态变化，通常由 CSS transition 实现
动画（Animation）使用 CSS @keyframes 定义关键帧，控制更复杂的视觉效果

核心思想：Vue 通过监听元素的生命周期，在特定时机自动添加/移除 CSS 类名，从而触发动画。

三、基础语法：使用<transition>组件

Vue 提供了内置的 <transition> 组件，用于包裹需要动画的元素。

1. 基本结构

<template>
  <div>
    <button @click="show = !show">切换显示</button>

    <transition name="fade">
      <p v-if="show">这是一段淡入淡出的文字</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

2. CSS 类名解析

当 <transition> 包裹的元素发生状态变化时，Vue 会自动添加以下类名：

类名触发时机说明
fade-enter-from进入前初始状态
fade-enter-active进入过程中可定义 transition
fade-enter-to进入后动画结束状态（通常可省略）
fade-leave-from离开前初始状态
fade-leave-active离开过程中可定义 transition
fade-leave-to离开后动画结束状态

name="fade" 决定了类名前缀。若不设置，默认为 v-。

3. 完整 CSS 动画定义

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

效果：文字在显示/隐藏时，会以 0.5 秒的缓动效果淡入淡出。

四、实战案例

案例 1：滑入滑出动画（结合 transform）

.slide-enter-active {
  transition: all 0.3s ease-out;
}

.slide-leave-active {
  transition: all 0.3s ease-in;
}

.slide-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
<transition name="slide">
  <p v-if="show">我从侧面滑进来啦！</p>
</transition>

案例 2：缩放动画（用于弹窗）

.scale-enter-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-leave-active {
  transition: all 0.2s linear;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(0.9);
}
<transition name="scale">
  <div class="modal" v-if="modalVisible">
    <h3>欢迎弹窗</h3>
    <button @click="modalVisible = false">关闭</button>
  </div>
</transition>

案例 3：使用 JavaScript 钩子控制动画

当 CSS 无法满足需求时（如使用第三方动画库），可通过 JavaScript 钩子控制。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <p v-if="show" ref="animatedText">Hello Vue!</p>
</transition>
methods: {
  beforeEnter(el) {
    el.style.opacity = 0
    el.style.transform = 'translateY(-20px)'
  },
  enter(el, done) {
    // 使用 setTimeout 模拟动画
    setTimeout(() => {
      el.style.transition = 'all 0.4s ease'
      el.style.opacity = 1
      el.style.transform = 'translateY(0)'
      done() // 动画结束回调
    }, 10)
  },
  leave(el, done) {
    el.style.transition = 'all 0.3s ease'
    el.style.opacity = 0
    el.style.transform = 'translateY(20px)'
    setTimeout(done, 300)
  }
}

done 回调必须调用，否则 Vue 会一直等待。

案例 4：列表过渡<transition-group>

<transition> 只能包裹单个元素，若要为列表添加动画，需使用 <transition-group>。

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 列表项之间的间隔动画 */
.list-move {
  transition: transform 0.3s;
}

tag="ul" 指定外层容器标签，<transition-group> 会渲染一个真实元素。

五、常见问题与解决方案

问题 1：动画不触发？

原因：

解决：

.fade-enter-active {
  transition: opacity 0.3s; /* 必须有 */
}

问题 2：多个元素同时动画，显得生硬？

建议：使用 :delay 实现错峰动画

<li 
  v-for="(item, index) in items" 
  :key="item.id"
  :style="{ transitionDelay: index * 50 + 'ms' }"
>
  {{ item.text }}
</li>

问题 3：组件切换时动画失效？

原因：Vue 默认复用组件，未触发销毁重建。

解决：使用 key 强制重新渲染

<transition mode="out-in">
  <component :is="currentView" :key="currentView" />
</transition>

六、高级技巧

1. 设置过渡模式（mode）

控制进入与离开的时序：

模式说明
in-out新元素先进入，旧元素再离开
out-in旧元素先离开，新元素再进入（推荐用于路由切换）
<transition mode="out-in">
  <component :is="view" />
</transition>

2. 自定义类名（兼容第三方库）

<transition
  enter-from-class="custom-enter-from"
  enter-active-class="custom-enter-active"
  leave-active-class="custom-leave-active"
  leave-to-class="custom-leave-to"
>
  <p v-if="show">使用自定义类名</p>
</transition>

适用于集成 Animate.css 等动画库。

3. 集成 Animate.css

npm install animate.css
<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <p v-if="show">使用 Animate.css 动画</p>
</transition>

需引入 CSS 文件：import 'animate.css';

七、性能优化建议 

建议说明
避免过度使用动画复杂动画影响 FPS，尤其在低端设备
使用 transform 和 opacity这两个属性由 GPU 加速，性能最佳
控制动画频率频繁触发的动画建议节流（throttle）
合理使用 mode避免同时进出造成卡顿

八、总结

功能工具说明
单元素过渡<transition>最常用
列表/多元素<transition-group>支持排序动画
CSS 动画enter-active, leave-active推荐方式
JS 控制@enter, @leave灵活控制复杂逻辑
第三方库Animate.css, GSAP增强视觉表现

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文