transition没生效的根本原因是初始值缺失且transition写在状态类中；必须显式定义基础状态（如.box{opacity:0}）并将transition声明在基础选择器上，而非仅在.active类中。
transition没生效，先看CSS里有没有初始值
transition不是“自动补间”，它只在两个明确的、可计算的状态之间插值。如果元素原本没有定义opacity、transform等属性的初始值，加了类名后浏览器就找不到“起点”，过渡直接跳到终点。
- 错误写法：
.box.active { opacity: 1; transition: opacity 0.3s; }—— 缺少.box { opacity: 0; } - 正确写法：必须显式声明基础状态，哪怕只是
.box { opacity: 0; transform: translateY(20px); } - 特别注意
transform：如果基础样式里写了transform: none，而激活类里写transform: translateY(-10px)，但none和函数值类型不匹配，某些浏览器会拒绝过渡
类名加对了，但transition属性被覆盖或没生效
加类名只是触发状态切换，真正控制动画的是CSS规则本身。很多失效问题出在transition没被正确继承或被更高优先级样式干掉。
-
transition必须写在基础选择器上（比如.box），不能只写在.box.active里——否则类加上去那一刻才开始“监听”，来不及过渡 - 避免用
transition: all，尤其在旧版 Safari 或 WebView 中，transform可能被忽略；应显式写transition: opacity 0.3s, transform 0.3s - 检查 DevTools 的 Computed 标签页，确认
transition最终计算值是否为有效字符串，而不是none或空
JS加类名后立刻又被其他样式覆盖
常见于框架重置、全局 CSS、或父/子元素z-index干扰。即使类名成功添加，浏览器也可能没机会渲染过渡帧。
- 用 DevTools 的 Styles 面板勾选“:hover”或手动 toggle 类名，看过渡是否能复现——如果能，说明 JS 执行没问题，问题在触发时机或样式层叠
- 子元素有
z-index时，父元素必须设z-index（哪怕只是z-index: 0），否则transform过渡会被打断 - 绝对定位元素若覆盖了交互区域（比如
position: absolute; opacity: 0仍捕获点击），会导致按钮点不中，看似“JS没反应”，其实是 DOM 层叠遮挡
滚动或高频事件里加类名，但过渡被节流或跳过
在scroll或resize回调里频繁调用classList.add()，浏览器可能合并重排、丢弃中间状态，导致 transition 没机会启动。
立即学习“Java免费学习笔记（深入）”；
- 不要在 scroll 回调里直接操作 class——改用
IntersectionObserver监听进入视口，或用requestAnimationFrame节流，确保每帧最多一次状态判断 - 避免在加类后立刻读取
offsetHeight等触发重排的属性，这会强制同步布局，破坏 transition 流程 - 如果必须动态计算进度再加类，确保只在关键阈值（如
scrollY > 200）才调用，而不是每次 scroll 都执行
