直接结论：用块级修饰符（如.button--hovered）触发transition最稳妥；transition声明必须写在基础块类中，修饰符只负责改值，避免作用域错位与js失控。
直接结论：用 BEM 的块级修饰符（如 .button--hovered）触发 transition 最稳妥；不要把 transition 写在元素级类（如 .button__icon）上，否则状态与样式作用域错位，JS 控制易失控。
为什么必须用块级修饰符触发 transition
transition 依赖「两个确定状态之间的变化」，而 BEM 中块（block）代表独立可复用的组件单元。一旦把触发类挂到子元素上（比如 .card__title--expanded），就隐含假设该子元素能脱离父容器独立存在——但实际中，height、opacity、transform 等过渡属性往往需要父容器配合 overflow、display 或定位上下文才能生效。
常见错误现象包括：
- 添加
.menu__item--active后，transform: scaleY(1)没反应——因为父.menu没设overflow: hidden，高度未被裁剪 - 点击后
.form__input--focused触发了 border 变色，但 label 上浮动画卡顿——因为 label 的 transition 写在了.form__label上，和 input 状态不同步
正确做法是统一由块控制：给 .form--focused 添加整体过渡逻辑，再让子元素通过后代选择器响应：.form--focused .form__label。
transition 应该写在哪个类上
transition 声明必须写在「初始状态类」里，而不是修饰符类里。这是 CSS cascade 和 transition 触发机制决定的——浏览器只在属性值真正变化时才启动过渡，不是靠类名出现与否。
关键实操建议：
- 把
transition放在基础块类中，例如：.accordion { transition: height 0.25s ease-in-out, opacity 0.2s; } - 修饰符只负责改值，不负责定义过渡行为：
.accordion--open { height: auto; opacity: 1; } - 避免在修饰符里写
transition: none——这会覆盖所有继承来的 transition，导致后续其他状态切换失效 - 如果某子元素需单独过渡（如图标旋转），仍应保留在块级修饰符下控制：
.button--loading .button__icon { animation: spin 1s infinite; }，而非用.button__icon--spinning
哪些 transition-property 值在 BEM 下最安全
BEM 强调语义隔离，所以 transition 的目标属性必须是「块自身可稳定控制」的，不能依赖子元素计算后的表现。
推荐优先使用：
-
opacity：完全独立，无布局影响 -
transform（尤其是translate、scale）：触发 GPU 加速，不触发重排 -
color、background-color：渲染开销低，兼容性好
慎用或需额外约束：
-
height/width：必须确保初始值不是auto，否则 transition 不生效；建议搭配max-height或clip-path替代 -
margin/padding：可能引发相邻元素重排，影响性能 -
display：不可过渡，display: none ↔ block是瞬间切换，要用visibility+opacity组合模拟
最常被忽略的一点：transition 的 timing-function 和 duration 必须和 JS 状态更新节奏对齐。比如你用 requestAnimationFrame 切换类名，但 transition-delay 设为 0.1s，就可能错过首帧——这类细节在 BEM + transition 组合中极易因“类名加得快、样式跟得慢”而暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
