动画类名必须用bem双连字符--修饰符，因其是工具链识别状态类的唯一依据，确保语义绑定组件、避免解析错误与全局污染，并需严格匹配css的animation/transition声明及js精准时机控制。
动画类名不是“加个动效”就行，它必须和组件状态绑定、可预测、不污染全局样式。直接写 .animate-in 或 .slide-left 会导致样式错位、复用失败、调试困难——BEM 的修饰符（--）正是为解决这类问题设计的。
为什么动画必须用 -- 修饰符，不能用单横线或驼峰
BEM 规范强制用双连字符 -- 标识修饰符，这是解析器识别状态类的唯一依据。工具链（如 Stylelint、PostCSS 插件）靠它区分 .card__title（元素）和 .card--fade-in（状态），写成 .card-fade-in 或 .cardFadeIn 会被当成新 Block，破坏命名一致性，也导致 IDE 类名跳转失效。
-
.modal--fade-scale-in✅ 正确：工具能识别为modal块的fade-scale-in状态 -
.modal-fade-scale-in❌ 错误：被解析为独立块modal-fade-scale-in，脱离上下文 -
.modalFadeScaleIn❌ 错误：CSS 选择器不支持驼峰，且无法被自动化规则校验
animation 和 transition 必须与修饰符严格对齐
只加类名不配 CSS 动画属性，等于没写。常见错误是写了 .button--hover-scale，但 CSS 里只定义了 transform，漏了 transition: transform 0.2s ease，结果 hover 没反应，开发者却去查 JS 逻辑。
- 每个动画修饰符必须显式声明
animation或transition，不能依赖继承或全局规则 - 避免
* { transition: all .2s }：它会让color、margin等非预期属性也触发过渡，且无法用will-change优化 - 简单交互（如 hover 缩放）优先用
transition；复杂序列（如 loading 循环）用animation更可控
JS 控制动画类名时，时机比逻辑更重要
类名加完立刻移除，动画根本播不完；监听 animationend 却没过滤事件来源，可能误删其他动画的类。关键不是“怎么加”，而是“什么时候加、什么时候收”。
- 入场动画：用
element.classList.add('card--fade-in')，等animationend事件再清理，且需检查event.animationName === 'fade-in' - 退出动画：先加退出类（
card--fade-out），再移除入场类（card--fade-in），确保 CSS 能触发退出过渡 - 禁用竞态：同一元素上多个动画状态切换时，用
getAnimations().forEach(a => a.cancel())主动中断旧动画
最易被忽略的是「修饰符必须语义绑定组件」——.card--fade-in 的意义只在 card 上成立，挪到 modal 上就失效；而动画的触发条件（如是否需要硬件加速）、取消逻辑、事件过滤，都得跟着这个绑定关系走，不是换个类名就能复用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
