动画类名必须语义化、绑定组件且符合BEM规范，如card--fade-in；统一用双连字符--，禁用驼峰或下划线；须与CSS的animation/transition严格对齐，避免全局transition；JS控制需精准匹配事件与时机。
动画类名必须带语义，不能只写 animate-in 这种模糊名
用户看到类名得立刻知道它干啥、用在哪儿、和谁配合。比如 card--fade-in 比 fadeIn 更可靠，因为绑定了组件（card）和行为（fade-in），不会和其他模块的 fade 冲突。
常见错误是把动画当“工具函数”来命名：slideLeft、zoomIn——这类名一加到按钮上就出问题：按钮滑左？还是整个页面滑左？没人能猜。
-
card--expand-open：只用于 card 组件的展开动效，配合card__content展开高度 -
modal--fade-scale-in：模态框入场，同时有透明度+缩放，不单独拆成两个类 - 避免
animate-bounce这类无上下文名；BEM 要求修饰符前必须有块名或元素名
BEM 里动画修饰符统一用双连字符 --，不混用单横线或驼峰
这是 BEM 官方写法，也是 CSS 工具链（如 PostCSS、Stylelint）识别修饰符的基础。用错格式会导致自动化检查失效，也破坏团队协作一致性。
例如 button--loading-spin 是对的；button-loadingSpin 或 button_loading-spin 都会干扰 CSS 选择器解析和 IDE 的类名跳转。
- 所有动画类都走
块名--修饰符或元素名--修饰符，如nav__item--active-slide - 修饰符内部用小写字母+连字符，不用数字开头（
--v2-fade❌），也不用下划线（--fade_in❌） - 如果一个组件有多个动画状态，用不同修饰符区分：
tab--enter-active/tab--leave-active，而不是靠 JS 动态拼接类名
动画类名要和 transition / animation 属性严格对齐，别让 class 只是“摆设”
很多项目写了 button--hover-scale，但 CSS 里只定义了 transform，没配 transition，或者 transition-property 漏了 transform——结果动画不触发，开发者以为是 JS 逻辑错了，其实只是 CSS 没生效。
性能影响很实际：用 animation 做复杂序列（如 loading 循环）比纯 transition 更可控；但简单 hover 缩放，用 transition 更轻量、更易复用。
- 每个动画类必须显式声明
animation或transition，不能依赖父级继承 - 避免在
* { transition: all .2s }这种全局规则里“碰运气”，它会让非预期属性也动，且无法被will-change优化 - 需要硬件加速时，
transform和opacity是安全的；慎用left/top触发重排
JS 控制动画类名时，注意添加/移除时机与事件监听的匹配
用 element.classList.add('card--fade-in') 后立刻 remove，动画根本来不及播；或者监听 animationend 却没过滤 animationName，导致其他动画结束也触发回调。
真实场景中，Modal 打开后要等 modal--fade-scale-in 结束才允许点击内容，但若监听错事件，可能提前解锁。
- 添加类后，用
getComputedStyle(el).animationName确认是否已生效（尤其 SSR 渲染后） - 监听
animationend时，检查e.animationName === 'fade-scale-in'，不是只看事件类型 - 移除类名建议用
setTimeout(() => el.classList.remove('...'), 0)，确保在下一帧执行，避开样式计算冲突
真正难的不是写对一个动画类名，而是让所有组件里的 -- 修饰符含义一致、所有 animationend 监听不漏不滥、所有 transition 不意外触发重排。这些细节堆起来，才是可维护的动画系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
