transition不生效主因是样式链断裂，需确保transition声明始终存在于基础类中而非:hover或动态class内，且避免使用display/height:auto等不可过渡属性。
transition 不生效，90% 是因为浏览器压根没拿到「起始值」或「过渡声明本身已丢失」——不是代码写错了，是样式链断了。
transition 写在 :hover 里却只进不出
鼠标悬停时有动画，移开时“啪”一下跳回原状，说明 transition 被塞进了 :hover 规则里。浏览器只在伪类激活时才“看见”这个声明，一旦离开，上下文清空，自然没得过渡。
- ✅ 正确：
.btn { transition: opacity 0.2s; }+.btn:hover { opacity: 0.7; } - ❌ 错误：
.btn:hover { opacity: 0.7; transition: opacity 0.2s; } - 用 DevTools 的 Computed 面板确认
transition-property是否始终存在，而不是只在:hover下亮起
JS 切换 class 后 transition 彻底失效
调用 el.classList.remove("hidden") 再 el.classList.add("shown")，等于把 transition 声明随旧类一起删掉了。浏览器重新计算样式时，发现当前没有 transition，只能硬切终态。
- 必须把
transition抽到一个永不被移除的基础类中，例如：.animatable { transition: opacity 0.3s, transform 0.25s; } - 状态类只管值：
.animatable--hidden { opacity: 0; transform: translateY(10px); } - 别在 JS 里直接写
el.style.opacity = "0"，这会覆盖 CSS 中的transition声明，变成none
height 或 display 切换时动不了
height: auto 和 display: none 都不可插值：前者没有确定像素起点，后者是离散状态，浏览器没法算中间帧。
立即学习“前端免费学习笔记（深入）”；
- 显隐推荐组合：
opacity: 0/1+visibility: hidden/visible+pointer-events: none/auto - 高度变化改用
max-height模拟，初始设max-height: 0+overflow: hidden，目标设足够大的值（如max-height: 500px） - 绝对不要写
transition: all 0.3s—— 一旦遇到display这类不可过渡属性，整条声明静默失效，且不报错
Firefox / Safari 里 transition 看似写了却不触发
Firefox 对语法更严格：transition: opacity 0.3s ease 0 中的 0 必须带单位（0s 或 0ms），否则整条声明被判定无效，DevTools 里直接划掉。
- Safari 等 WebKit 浏览器必须写
-webkit-transition，且要放在标准transition前面，两者参数必须完全一致 - 渐变背景（
linear-gradient）无法过渡，background-image是 W3C 明确规定的不可动画属性，别试了 - 父元素设了
transform或overflow: hidden可能截断子元素过渡，尤其在嵌套结构中
最常被忽略的一点：transition 不是“加一次就永久生效”的开关，它是一份持续存在的样式契约——只要你想让它动，它就必须一直在 computed 样式里，不能靠 JS 临时塞、也不能靠伪类条件加载。
