重生之我在学Vue--第15天 Vue 3 动画与过渡实战指南

重生之我在学Vue–第15天 Vue 3 动画与过渡实战指南

前言

“优秀的动画不是炫技，而是用户心智的引导者。” —— 交互动效设计准则

经过15天的进化，我们的任务管理系统已具备国际化能力。今天将为界面注入生命力，通过动画提升用户体验。

Vue3 官方中文文档传送点： 过渡与动画

Vue3 官方中文文档传送点： 简介 | Vue.js

Vue3 的中文官方文档学习笔记很全还有练习场，推荐去官网学习

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、Vue内置过渡系统

1.1 Transition组件核心机制

过渡类名生命周期：

/* 进入动画 */
.v-enter-from { opacity: 0; transform: translateY(20px); }
.v-enter-active { transition: all 0.3s ease; }
.v-enter-to { opacity: 1; transform: translateY(0); }

/* 离开动画 */
.v-leave-from { opacity: 1; }
.v-leave-active { transition: opacity 0.5s ease; }
.v-leave-to { opacity: 0; }

1.2 列表过渡实战

<template>
  <transition-group 
    name="task-list"
    tag="ul"
    class="task-container"
  >
    <li 
      v-for="task in tasks" 
      :key="task.id"
      class="task-item"
    >
      {{ task.title }}
      <button @click="removeTask(task.id)">×</button>
    </li>
  </transition-group>
</template>

<style>
.task-list-move {  /* 对移动中的元素应用的过渡 */
  transition: all 0.5s ease;
}
.task-list-enter-active,
.task-list-leave-active {
  transition: all 0.5s ease;
}
.task-list-enter-from,
.task-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.task-list-leave-active {
  position: absolute;
}
</style>

二、专业动画库集成

2.1 GSAP高级动画

npm install gsap

任务卡片交互动画：

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

const cardRef = ref(null)

// 鼠标悬停动画
const onHover = () => {
  gsap.to(cardRef.value, {
    duration: 0.3,
    scale: 1.05,
    boxShadow: '0 10px 20px rgba(0,0,0,0.1)'
  })
}

// 鼠标离开动画
const onLeave = () => {
  gsap.to(cardRef.value, {
    duration: 0.3,
    scale: 1,
    boxShadow: '0 2px 5px rgba(0,0,0,0.1)'
  })
}
</script>

<template>
  <div 
    ref="cardRef"
    @mouseenter="onHover"
    @mouseleave="onLeave"
    class="task-card"
  >
    <!-- 卡片内容 -->
  </div>
</template>

2.2 动画性能优化技巧

/* 启用GPU加速 */
.task-item {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* 限制动画层级 */
@media (prefers-reduced-motion: reduce) {
  .task-item {
    transition: none !important;
  }
}

三、全链路动画设计

3.1 路由过渡动画

<router-view v-slot="{ Component }">
  <transition
    name="fade-slide"
    mode="out-in"
  >
    <component :is="Component" />
  </transition>
</router-view>

<style>
.fade-slide-enter-active {
  transition: all 0.3s ease-out;
}

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

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>

3.2 数据加载骨架屏

<template>
  <div v-if="loading" class="skeleton-container">
    <div 
      v-for="i in 5" 
      :key="i"
      class="skeleton-item"
    >
      <div class="skeleton-line"></div>
      <div class="skeleton-line short"></div>
    </div>
  </div>
</template>

<style>
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-line {
  height: 16px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}
</style>

四、今日任务与总结

必做任务清单

1. 基础动画
   • 为任务添加/删除添加弹性动画
   • 实现任务状态切换的渐变动画

2. 高级效果
   • 添加任务完成时的庆祝动效
   • 实现数据加载时的骨架屏效果

3. 性能优化
   • 使用Chrome Performance面板分析动画性能
   • 针对移动端优化动画帧率

动画效果指标

动画类型	FPS	耗时	内存占用
CSS过渡	60	3ms	0.2MB
GSAP动画	58	5ms	0.5MB
复杂联动画	45	12ms	1.2MB

常见问题解决方案

// 解决Safari硬件加速问题
gsap.set(element, {
  force3D: true,
  webkitBackfaceVisibility: 'hidden'
})

// 批量动画优化
gsap.defaults({ 
  duration: 0.3,
  ease: "power2.out" 
})

明日预告：插件开发实战，打造专属工具库！