YepAPI/动画技能

动画

规则

• 使用 Framer Motion 实现 React 动画 — 使用 motion.div 并设置 initial、animate、exit 属性
• 使用 AnimatePresence 处理挂载/卸载动画 — 包裹条件渲染内容
• 使用 layout 属性实现自动布局动画（重排序、调整大小）
• 滚动动画：使用 useScroll() + useTransform() 实现视差和滚动触发的揭示效果
• 尊重减少动效偏好：使用 useReducedMotion() 钩子 — 关闭非必要的动画
• 子元素交错：使用 variants 并设置 staggerChildren 实现列表动画
• 性能优化：仅动画化 transform 和 opacity —— 切勿动画化 width、height、margin
• 保持动画时长简短：UI 过渡 200-400ms，页面过渡 400-800ms

避免

• 动画化布局属性（width, height, top, left）—— 应使用 transform: translate/scale
• UI 交互动画超过 1 秒 —— 感觉迟钝
• 未经用户触发自动播放动画 —— 造成混乱
• 忽略 prefers-reduced-motion —— 可访问性要求