React动画与交互设计实战 · 课程目录

React动画基础：CSS过渡与动画

组件生命周期与动画触发时机

React Transition Group入门

安装与核心组件：Transition, CSSTransition, SwitchTransition, TransitionGroup

CSSTransition实战

淡入淡出、滑动、缩放等入场/离场动画

Transition组件详解

动画状态 entering, entered, exiting, exited，自定义时长与延迟

SwitchTransition模式

元素切换平滑过渡：Tab切换、路由视图切换

TransitionGroup列表动画

列表添加、删除、排序的流畅动画

Framer Motion入门

安装与核心概念：motion组件, AnimatePresence, 声明式动画

motion组件基础

animate, initial, exit, transition属性

手势与拖拽动画

hover, tap, drag 交互手势驱动动画

AnimatePresence与路由动画

结合React Router实现页面切换动画

布局动画与LayoutId

使用layout属性实现元素位置平滑过渡

Framer Motion为SVG路径、形状添加绘制与变换动画

关键帧与序列动画

多步骤动画序列，控制节奏与循环

动画变体 (Variants)

组织复杂动画，父子组件动画协调

React Spring入门

安装与核心概念：useSpring, useTransition, useChain

useSpring与useTrail

单个与序列元素的弹性动画

useTransition列表与挂载动画

列表项进出与排序的弹簧动画

useChain动画编排

多个动画串联成流畅序列

GSAP在React中的集成

安装与基础用法：gsap.to, gsap.from, Timeline

GSAP与Ref结合

useRef获取DOM节点，驱动复杂时间线动画

GSAP ScrollTrigger插件

滚动驱动的视差、淡入、固定动画

Intersection Observer与懒加载动画

原生API或React库实现视口进入动画

自定义Hooks封装动画逻辑

动画状态与行为抽象为可复用Hooks

动画性能优化

重排重绘，will-change, transform与opacity

响应式动画

根据屏幕尺寸调整动画参数，媒体查询/ResizeObserver

无障碍动画

prefers-reduced-motion，动画减弱选项

微交互设计

按钮反馈、表单验证提示、加载状态小动画

交互动画综合实战（一）

仪表盘页面：卡片入场、图表动画

交互动画综合实战（二）

电商产品详情页：图片切换、加入购物车飞行动画

交互动画综合实战（三）

个人作品集网站：滚动叙事、视差、页面过渡