a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
69 lines
3.0 KiB
Markdown
69 lines
3.0 KiB
Markdown
# 默认动画库推荐
|
||
|
||
**使用时机**：仅在需要复杂动画交互 且 用户未指定动画方案 且 主题中无自定义动画系统时使用。
|
||
|
||
## ⚠️ 重要提醒：动画不是必须的！
|
||
|
||
- 少量简单动画 → 直接使用 CSS 原生动画（`transition`、`@keyframes`、`animation`）
|
||
- Tailwind 项目 → 优先使用内置的 `transition-*`、`animate-*` 类
|
||
- 只有在动画数量多或交互复杂时，才考虑引入动画库
|
||
|
||
## 🎬 推荐列表
|
||
|
||
| 动画库 | 推荐理由 | AI 生成友好度 | 核心劣势 | 适用场景 |
|
||
|-------|---------|--------------|---------|---------|
|
||
| **CSS 原生动画** | ⚡️ 零依赖首选<br>浏览器原生支持，无包体积，性能最优。 | 🌟🌟🌟🌟🌟<br>AI 对 CSS 动画极度熟悉 | 复杂时序控制困难，<br>手势交互需额外代码 | 默认首选。<br>Hover、Focus、简单过渡。 |
|
||
| **Tailwind Animate**<br>(tailwindcss-animate) | ⚡️ Shadcn/UI 默认方案<br>纯 Class 控制，零 JS 心智负担。 | 🌟🌟🌟🌟🌟<br>AI 只需拼 class，几乎不会翻车 | 表达力有限，<br>无法处理复杂时序和状态 | 下拉、Toast、Modal、<br>Tooltip 等基础过渡。 |
|
||
| **Framer Motion** | 👑 React 动画事实标准<br>声明式 API + Layout 动画 + 手势系统。 | 🌟🌟🌟🌟🌟<br>训练数据极多，AI 可稳定生成复杂动画 | 包体积偏大，<br>学习成本略高 | 复杂交互原型、页面转场、<br>拖拽排序、微交互系统。 |
|
||
| **AutoAnimate**<br>(@formkit/auto-animate) | ✨ 一行代码魔法动画<br>DOM 变化即动画，极致省心。 | 🌟🌟🌟🌟<br>AI 基本不用理解动画原理 | 不可控，<br>难以产品级精调 | 列表 CRUD、表格增删、<br>卡片排序。 |
|
||
|
||
## 🎯 选择策略
|
||
|
||
**按需求复杂度匹配**：
|
||
|
||
1. **不需要动画** → 不引入任何动画库 ✅
|
||
2. **需要动画但数量少（< 5 处）** → **CSS 原生动画** ✅
|
||
3. **大量动画** → 按复杂度选择：
|
||
- **简单过渡** → **Tailwind Animate**
|
||
- **列表增删** → **AutoAnimate**
|
||
- **手势/布局/复杂时序** → **Framer Motion**
|
||
|
||
## 💡 CSS 原生动画示例
|
||
|
||
```css
|
||
/* 简单 Hover 效果 - 无需任何库 */
|
||
.button {
|
||
transition: all 0.2s ease;
|
||
}
|
||
.button:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 淡入动画 */
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.card {
|
||
animation: fadeIn 0.3s ease-out;
|
||
}
|
||
```
|
||
|
||
```html
|
||
<!-- Tailwind 内置动画 - 无需额外依赖 -->
|
||
<div class="transition-all duration-300 hover:scale-105">
|
||
Hover 放大
|
||
</div>
|
||
<div class="animate-pulse">
|
||
加载占位符
|
||
</div>
|
||
```
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
1. **性能优先**：动画过多会影响性能，尤其在移动端
|
||
2. **避免过度使用**：克制使用动画，仅在提升 UX 时添加
|
||
3. **按需引入**：Framer Motion 较大，确认需要复杂动画再引入
|
||
4. **一致性**：同一项目尽量使用统一的动画方案
|
||
5. **可访问性**：尊重用户的 `prefers-reduced-motion` 设置
|