添加 UI 动画与微交互时，用可复用动效模式让界面更精致

在需要为界面添加动画、过渡、微交互或动效设计时，提供悬停、入场、退场、加载、手势反馈等可复用模式与性能最佳实践。

适用场景

解决思路

1. 悬停效果：使用缩放（scale）、上浮（translateY）、发光（box-shadow）、颜色变化
2. 入场动画：使用淡入（fade-in）、滑入（slide-in）、缩放进入（zoom-in），列表项使用交错（stagger）
3. 退场动画：使用淡出（fade-out）、滑出（slide-out）、缩放退出（scale-out）
4. 加载动画：使用脉冲（pulse）、骨架屏波浪（skeleton waves）、进度条（progress bars）
5. 手势反馈：点击时使用涟漪（ripple）、拖拽反馈（drag feedback）、滑动指示器（swipe indicators）
6. 在 tailwind.config.js 中配置动画：animation 字段添加 'fade-in': 'fadeIn 0.5s ease-out'、'slide-up': 'slideUp 0.3s ease-out'、'scale-in': 'scaleIn 0.2s ease-out'
7. 使用 Framer Motion 时，通过 initial={{ opacity: 0, y: 20 }}、animate={{ opacity: 1, y: 0 }}、transition={{ duration: 0.3 }} 实现入场动画
8. 微交互时长使用 200-300ms
9. 尊重 prefers-reduced-motion，为减少动效的用户提供降级
10. 为性能考虑，只对 transform 和 opacity 做动画
11. 添加缓动函数（easing functions）
12. 为列表项添加交错（stagger）动画
13. 提供悬停（hover）和激活（active）状态