用class控制状态切换并配合CSS过渡是实现清晰、可控、可维护动画的核心方法：状态即class，语义化命名如.is-open/.is-loading，transition写在基础类中，JavaScript操作classList，避免all过渡和状态爆炸。
用 class 控制状态切换，配合 CSS 过渡（transition），是让多个状态变化清晰、可控、可维护的核心方法。关键不是堆 transition 属性，而是把“状态”显式定义为 class，再让 CSS 告诉浏览器：当这些 class 出现/消失时，哪些属性该平滑变化。
状态即 class，一个 class 代表一种明确视觉状态
避免直接操作 style 或写一堆 :hover/:focus/:active 组合。把每种有意义的状态单独命名，比如：
.is-open（菜单展开）、.is-loading（按钮加载中）、.is-error（表单错误）、.is-success（提交成功）。
- 状态名要语义化，不写 .fade-in-quick 这类描述动画的类名
- 同一元素上最多同时存在 1–2 个状态类，避免状态爆炸
- 用 JavaScript 切换 class（element.classList.add/remove/toggle），而不是手动改 style
过渡只写在「基础类」上，靠 class 变化触发
把 transition 写在默认状态（比如 .button）里，而不是写在每个状态类里。浏览器会自动在过渡属性变化时启动动画。
.button {
background: #007bff;
color: white;
transition: background 0.2s ease, transform 0.15s ease;
}
.button.is-loading {
background: #6c757d;
transform: scale(0.95);
}
.button.is-success {
background: #28a745;
transform: translateY(-1px);
}
- transition 必须写在「有初始值」的元素上（通常是基础类），否则变化无过渡
- 只对真正需要过渡的属性设 transition，别全写 all 0.3s，易出意外
- 不同状态间共用同一组 transition 属性，保持动效一致性
复杂状态组合？用 class 优先级 + 独立过渡控制
当多个状态可能叠加（如 .is-open.is-error），靠 CSS 选择器权重和 transition 的属性覆盖逻辑来管理。
- 给高优状态加更具体的选择器，比如 .modal.is-open.is-error 覆盖基础 .modal.is-open
- 必要时用 transition-property: none 临时禁用某状态下的过渡（如出错时立刻变红，不缓动）
- 用 transition-delay 错开多个属性的动画节奏，提升可读性
调试技巧：用开发者工具实时开关 class
在 Chrome/Firefox 的 Elements 面板里，直接勾选/取消 class 复选框，能立刻看到状态切换效果和过渡是否生效——这是比反复刷新更快的验证方式。
立即学习“前端免费学习笔记（深入）”；
- 检查 computed 标签页，确认 transition 相关属性是否被正确解析
- 看 Styles 面板里，当前激活的 class 是否覆盖了预期样式
- 右键元素 → “Break on attribute modification”，监控 class 变化时机是否符合逻辑
