Vue 3 动画与过渡效果

概述

动画与过渡效果是现代Web应用中提升用户体验的重要手段。Vue 3提供了强大的动画系统，支持组件进入/离开过渡、列表过渡、状态过渡等多种动画场景。本集将深入探讨Vue 3的动画与过渡机制，包括内置组件、CSS动画、JavaScript动画以及第三方动画库的集成，帮助你创建流畅、生动的用户界面。

核心知识点

1. Transition组件

Vue 3的Transition组件用于处理单个元素或组件的进入和离开过渡效果。

基本用法

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <Transition name="fade">
      <p v-if="show">Hello World</p>
    </Transition>
  </div>
</template>

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

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

过渡类名

类名 描述
v-enter-from 进入过渡的起始状态
v-enter-active 进入过渡的激活状态
v-enter-to 进入过渡的结束状态
v-leave-from 离开过渡的起始状态
v-leave-active 离开过渡的激活状态
v-leave-to 离开过渡的结束状态

2. 动画效果

除了过渡效果，Vue 3还支持CSS动画。

CSS动画示例

<template>
  <div>
    <button @click="show = !show">Toggle Animation</button>
    <Transition name="bounce">
      <p v-if="show">Bouncing Element</p>
    </Transition>
  </div>
</template>

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

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s ease-out;
}

.bounce-leave-active {
  animation: bounce-in 0.5s ease-out reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>

3. 列表过渡

TransitionGroup组件用于处理列表项的添加、删除和顺序变化的过渡效果。

基本用法

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
    <TransitionGroup name="list" tag="ul">
      <li v-for="item in items" :key="item.id">
        {{ item.text }}
      </li>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' }
])

let nextId = 4

const addItem = () => {
  items.value.push({ id: nextId++, text: `Item ${nextId - 1}` })
}

const removeItem = () => {
  items.value.pop()
}
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* 列表项移动过渡 */
.list-move {
  transition: transform 0.5s ease;
}
</style>

4. 动态过渡

Vue 3支持动态设置过渡名称，实现更灵活的过渡效果。

动态过渡示例

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <select v-model="transitionName">
      <option value="fade">Fade</option>
      <option value="slide">Slide</option>
      <option value="bounce">Bounce</option>
    </select>
    <Transition :name="transitionName">
      <p v-if="show">Dynamic Transition</p>
    </Transition>
  </div>
</template>

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

<style>
/* 省略CSS样式 */
</style>

5. 状态过渡

Vue 3支持使用watch或computed属性实现数值变化的过渡效果。

数值过渡示例

<template>
  <div>
    <button @click="count++">Increment</button>
    <p>{{ animatedCount }}</p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const count = ref(0)
const animatedCount = ref(0)

watch(count, (newVal, oldVal) => {
  const duration = 500
  const startTime = Date.now()
  const startVal = animatedCount.value
  const diff = newVal - startVal
  
  const updateValue = () => {
    const elapsed = Date.now() - startTime
    const progress = Math.min(elapsed / duration, 1)
    animatedCount.value = startVal + diff * progress
    
    if (progress < 1) {
      requestAnimationFrame(updateValue)
    }
  }
  
  updateValue()
})
</script>

6. JavaScript钩子函数

Vue 3允许使用JavaScript钩子函数控制过渡过程。

钩子函数示例

<template>
  <Transition
    name="custom"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
  >
    <p v-if="show">JavaScript Hooks</p>
  </Transition>
</template>

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

const beforeEnter = (el) => {
  console.log('Before Enter')
  el.style.opacity = 0
}

const enter = (el, done) => {
  console.log('Enter')
  // 使用GSAP等动画库
  setTimeout(() => {
    el.style.opacity = 1
    done() // 必须调用done()表示动画结束
  }, 500)
}

// 其他钩子函数...
</script>

7. 第三方动画库集成

Vue 3可以与GSAP、Animate.css等第三方动画库集成。

集成Animate.css

<template>
  <Transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <p v-if="show">Animate.css Integration</p>
  </Transition>
</template>

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

<style>
@import 'animate.css';
</style>

集成GSAP

<template>
  <Transition
    @enter="enter"
    @leave="leave"
  >
    <p v-if="show">GSAP Integration</p>
  </Transition>
</template>

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

const enter = (el) => {
  gsap.fromTo(el, 
    { opacity: 0, y: -50 },
    { opacity: 1, y: 0, duration: 0.5 }
  )
}

const leave = (el) => {
  gsap.fromTo(el, 
    { opacity: 1, y: 0 },
    { opacity: 0, y: 50, duration: 0.5 }
  )
}
</script>

最佳实践

  1. 选择合适的过渡类型：

    • 对于简单的淡入淡出效果，使用CSS过渡
    • 对于复杂的动画效果，使用CSS动画或JavaScript动画库
    • 对于列表操作，使用TransitionGroup组件

  2. 优化性能：

    • 避免过渡效果过于复杂，影响页面性能
    • 对于大量元素的过渡，考虑使用虚拟滚动
    • 使用will-change属性优化动画性能

  3. 保持一致性：

    • 整个应用中使用统一的动画时长和缓动函数
    • 建立动画设计系统，确保动画效果的一致性

  4. 考虑可访问性：

    • 为动画效果提供关闭选项
    • 避免使用可能导致用户不适的动画（如闪烁、快速旋转）
    • 确保动画不会影响内容的可读性

  5. 使用预处理器：

    • 使用Sass/Less等预处理器管理动画变量和混合
    • 利用CSS变量实现动画参数的动态调整

常见问题与解决方案

1. 过渡效果不生效

问题：Transition组件的过渡效果没有显示

解决方案：

  • 确保Transition组件只包裹一个根元素
  • 检查过渡类名是否正确
  • 确保CSS过渡属性设置正确
  • 检查是否有其他CSS样式覆盖了过渡效果

2. 列表过渡中的闪烁问题

问题：TransitionGroup组件在列表更新时出现闪烁

解决方案：

  • 为列表项添加唯一的key属性
  • 确保列表项的key值在更新时保持稳定
  • 调整过渡时长，避免过渡效果冲突

3. 动画性能问题

问题：复杂动画导致页面卡顿

解决方案：

  • 使用transform和opacity属性进行动画，避免重排
  • 使用will-change属性提示浏览器优化
  • 减少动画元素的数量
  • 使用硬件加速（如transform: translateZ(0)）

4. 嵌套过渡问题

问题：嵌套的Transition组件过渡效果冲突

解决方案：

  • 为每个Transition组件使用不同的name属性
  • 调整过渡时长，确保过渡效果按预期顺序执行
  • 使用JavaScript钩子函数手动控制过渡顺序

5. 动态组件过渡

问题：动态组件的过渡效果不生效

解决方案：

  • 使用Transition组件包裹component标签
  • 确保动态组件有唯一的key属性
  • 检查过渡类名是否正确
<Transition name="fade">
  <component :is="currentComponent" :key="currentComponent" />
</Transition>

进一步学习资源

  1. Vue 3 过渡与动画官方文档
  2. Animate.css 官方文档
  3. GSAP 官方文档
  4. CSS 动画性能优化
  5. Web Animations API

课后练习

  1. 练习1：基本过渡效果

    • 创建一个带有淡入淡出效果的组件
    • 实现点击按钮切换组件显示/隐藏
    • 调整过渡时长和缓动函数

  2. 练习2：列表过渡效果

    • 创建一个可添加/删除/排序的列表
    • 为列表项添加进入/离开/移动过渡效果
    • 实现列表项的拖拽排序功能

  3. 练习3：动态过渡效果

    • 创建一个可以切换过渡类型的组件
    • 实现至少3种不同的过渡效果
    • 允许用户调整过渡时长和缓动函数

  4. 练习4：状态过渡效果

    • 创建一个计数器组件
    • 实现数值变化的平滑过渡效果
    • 允许用户调整过渡时长

  5. 练习5：第三方动画库集成

    • 集成Animate.css实现多种动画效果
    • 集成GSAP实现复杂的动画序列
    • 实现基于用户交互的动态动画

  6. 练习6：组合动画效果

    • 创建一个包含多个元素的组件
    • 为每个元素实现不同的动画效果
    • 实现动画效果的顺序执行

通过本集的学习，你应该对Vue 3的动画与过渡效果有了深入的了解。合理使用动画效果可以提升用户体验，但也要注意性能优化和可访问性。

« 上一篇 Vue 3样式管理与CSS架构 - 现代前端样式方案 下一篇 » Vue 3 TypeScript深度集成 - 类型安全的前端开发
↑