网站建设制作介绍河南网站 案例

重生之我在学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 }"><transitionname="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" 
})

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