为什么CSS transition不生效？

transition不生效主因是样式链断裂，需确保transition声明始终存在于基础类中而非:hover或动态class内，且避免使用display/height:auto等不可过渡属性。

transition 不生效，90% 是因为浏览器压根没拿到「起始值」或「过渡声明本身已丢失」——不是代码写错了，是样式链断了。

transition 写在 :hover 里却只进不出

鼠标悬停时有动画，移开时“啪”一下跳回原状，说明 transition 被塞进了 :hover 规则里。浏览器只在伪类激活时才“看见”这个声明，一旦离开，上下文清空，自然没得过渡。

1. ✅ 正确：.btn { transition: opacity 0.2s; } + .btn:hover { opacity: 0.7; }
2. ❌ 错误：.btn:hover { opacity: 0.7; transition: opacity 0.2s; }
3. 用 DevTools 的 Computed 面板确认 transition-property 是否始终存在，而不是只在 :hover 下亮起

JS 切换 class 后 transition 彻底失效

调用 el.classList.remove("hidden") 再 el.classList.add("shown")，等于把 transition 声明随旧类一起删掉了。浏览器重新计算样式时，发现当前没有 transition，只能硬切终态。

1. 必须把 transition 抽到一个永不被移除的基础类中，例如：.animatable { transition: opacity 0.3s, transform 0.25s; }
2. 状态类只管值：.animatable--hidden { opacity: 0; transform: translateY(10px); }
3. 别在 JS 里直接写 el.style.opacity = "0"，这会覆盖 CSS 中的 transition 声明，变成 none

height 或 display 切换时动不了

height: auto 和 display: none 都不可插值：前者没有确定像素起点，后者是离散状态，浏览器没法算中间帧。

1. 显隐推荐组合：opacity: 0/1 + visibility: hidden/visible + pointer-events: none/auto
2. 高度变化改用 max-height 模拟，初始设 max-height: 0 + overflow: hidden，目标设足够大的值（如 max-height: 500px）
3. 绝对不要写 transition: all 0.3s —— 一旦遇到 display 这类不可过渡属性，整条声明静默失效，且不报错

Firefox / Safari 里 transition 看似写了却不触发

Firefox 对语法更严格：transition: opacity 0.3s ease 0 中的 0 必须带单位（0s 或 0ms），否则整条声明被判定无效，DevTools 里直接划掉。

1. Safari 等 WebKit 浏览器必须写 -webkit-transition，且要放在标准 transition 前面，两者参数必须完全一致
2. 渐变背景（linear-gradient）无法过渡，background-image 是 W3C 明确规定的不可动画属性，别试了
3. 父元素设了 transform 或 overflow: hidden 可能截断子元素过渡，尤其在嵌套结构中

最常被忽略的一点：transition 不是“加一次就永久生效”的开关，它是一份持续存在的样式契约——只要你想让它动，它就必须一直在 computed 样式里，不能靠 JS 临时塞、也不能靠伪类条件加载。