🎬 Vue动画·过渡
30章 从基础到复杂动效
✨
友好 · 生动易懂
1
第1章
Vue动画初探
为什么需要动画 · 过渡系统概述 · CSS过渡与动画基础
2
第2章
单元素/组件的过渡
<transition>组件 · v-if/v-show过渡 · 动态切换效果
3
第3章
CSS过渡类名详解
v-enter/v-leave生命周期 · 自定义类名 · 过渡模式
4
第4章
CSS动画与<transition>
@keyframes · animate.css · 动画钩子函数
5
第5章
JavaScript钩子函数
@before-enter/@enter等 · Velocity.js复杂动效
6
第6章
列表过渡入门
<transition-group> · 进入/离开动画 · 移动动画
7
第7章
列表过渡进阶
交错动画 · 动态排序 · FLIP动画原理
8
第8章
状态过渡
数据驱动动画 · TweenMax/GSAP数字滚动 · SVG过渡
9
第9章
路由过渡基础
Vue Router+过渡 · 动态路由过渡 · 路由元信息
10
第10章
路由过渡进阶
嵌套路由过渡 · 滚动行为 · 性能优化
11
第11章
页面级过渡方案
页面切换动画 · 滑动/淡入淡出/缩放模式
12
第12章
组件内过渡
挂载/卸载动画 · 动态组件过渡 · 异步组件加载
13
第13章
过渡与第三方库集成
Anime.js · Three.js · Lottie动画集成
14
第14章
自定义指令实现动画
指令基础 · 生命周期结合动画 · 复用与封装
15
第15章
动画性能优化
GPU加速 · will-change · requestAnimationFrame
16
第16章
响应式动画
屏幕尺寸适配 · 媒体查询 · 移动端优化
17
第17章
手势与动画
触摸事件 · 滑动/拖拽 · Hammer.js手势动效
18
第18章
滚动触发动画
Intersection Observer · 视差效果 · 滚动进度条
19
第19章
时间线动画
GSAP时间线 · 序列编排 · 控制与回放
20
第20章
物理动画
弹簧效果 · 惯性滚动 · 弹性碰撞 · Matter.js
21
第21章
SVG动画进阶
路径动画 · 描边动画 · 变形动画 · 响应式数据
22
第22章
Canvas动画
Canvas基础 · 粒子系统 · 星空/雨滴 · 数据绑定
23
第23章
WebGL与Three.js
Three.js基础 · 3D场景 · 物体动画 · Vue集成
24
第24章
动画状态管理
Vuex与动画 · 状态机 · 复杂动画逻辑管理
25
第25章
可复用动画组件
封装通用组件 · 插槽与动画组合 · 设计模式
26
第26章
无障碍动画
prefers-reduced-motion · 暂停/恢复 · 用户偏好
27
第27章
测试动画
Jest · 动画时间模拟 · 视觉回归测试
28
第28章
动画设计模式
缓动函数 · 节奏控制 · 微交互设计原则
29
第29章
大型项目动画架构
模块划分 · 性能监控 · 团队动画规范
30
第30章
综合实战：仪表盘项目
完整动画仪表盘 · 综合运用所有知识