transition不触发是因为缺少可动画属性的数值变化；需确保class间属性值不同、类型兼容，避免用all和不可动画属性，并通过重排或requestAnimationFrame保证浏览器识别状态差。
transition 不触发，是因为没有“属性变化”这个动作
CSS transition 本身不关心你是用 :hover、:focus 还是 JS 切换 class —— 它只响应「某个可动画的 CSS 属性在两个状态间发生了数值变化」。如果你加了 transition: all 0.3s，但切换 class 后样式没变（比如目标 class 里没写新值），或者写了但属性不可动画（如 display、height 从 auto 变具体值），那过渡就静默失败。
- 检查目标 class 是否真正覆盖了要动的属性（例如
opacity、transform、background-color） - 避免用
all，明确写出要过渡的属性：transition: opacity 0.3s, transform 0.3s - 确保初始状态和目标状态的值类型兼容（比如
color: #000→color: #fff可动；color: red→color: transparent也可动；但visibility: hidden→visible不会过渡，因为不可动画）
class 切换后 transition 一闪而过或根本不执行
这是最常踩的坑：浏览器在 JS 同步设置 class 后，**立刻计算样式并应用过渡起始态**，但若起始态和结束态“看起来一样”，或者 DOM 重排被跳过，就会丢掉过渡。典型场景是刚加 class 就改样式，浏览器来不及识别中间状态。
- 用
getComputedStyle强制重排，再改样式：element.classList.add('active'); // 触发重排，让浏览器记住当前状态 window.getComputedStyle(element).transform; element.style.transform = 'scale(1.2)'; - 更稳妥的做法：用
setTimeout或requestAnimationFrame把样式变更延后一帧：element.classList.add('active'); requestAnimationFrame(() => { element.style.transform = 'scale(1.2)'; }); - 推荐直接靠 CSS 完成全部动画逻辑：把所有变化写进 class，JS 只负责 toggle，不要混用内联样式
想用 JS 控制过渡时机，但又不想写一堆 setTimeout
现代方案是监听 transitionend 事件 + 使用 transition-property 精确控制触发条件。它比靠时间猜更可靠，也避免重复绑定。
-
transitionend在任意一个过渡完成时触发，不是全部；需检查event.propertyName来区分 - 过渡中途移除 class 会触发事件，但
event.elapsedTime会小于声明时长，可用于判断是否被中断 - 为防多次触发，建议用
once: true选项或手动removeEventListener
element.addEventListener('transitionend', (e) => {
if (e.propertyName === 'transform') {
console.log('缩放完成');
}
}, { once: true });
某些属性过渡卡顿或无效，比如 height、margin、padding
这些属性从 0 → auto 或 auto → 具体值，浏览器无法插值，transition 直接跳变。这不是 bug，是规范限制。
立即学习“前端免费学习笔记（深入）”；
- 用
max-height替代height：设一个足够大的固定值（如max-height: 500px），配合overflow: hidden - 用
transform: scaleY(0)→scaleY(1)模拟高度展开，性能更好且可过渡 - 避免对
margin/padding做过渡，改用transform位移或clip-path裁剪
