css过渡未触发主因是浏览器未检测到样式起始状态变化，需确保切换前后目标属性值真实改变，并通过强制重排（如offsetheight）固化起始态。
transition为什么加了类也不动
直接给元素加 transition 属性，再用 JavaScript 切换类，但动画没触发——大概率是浏览器没检测到“样式变化的起始状态”。CSS 过渡只在属性值**发生改变的那一刻**开始计时，如果新旧类里目标属性值在切换瞬间“看起来一样”，过渡就跳过。
常见踩坑点：
- 旧类和新类里
opacity都是1，切过去自然没变化 - 用
display: none→display: block切换，display本身不支持过渡，且none状态下其他过渡属性也被重置 - 类切换后，目标属性被内联样式或更高优先级规则覆盖，实际没变
必须用 classList.toggle() 吗？
不是。关键不在方法名，而在**确保样式计算值真实变化**。用 element.classList.add()、.remove() 或 .toggle() 都行，但要注意时机：
- 不要在一次同步任务里连续 add + remove —— 浏览器可能合并渲染，过渡失效
- 如果需要“先收再展”，得等上一个动画结束：监听
transitionend事件，或用getComputedStyle(element).propertyName拿当前值做判断 - 避免在
requestAnimationFrame回调外直接读写样式（如offsetHeight强制回流）——容易打断过渡链
transition-property 写 all 有风险吗
有。写 transition: all 0.3s 看似省事，但会过渡所有可动画属性，包括你没打算动的 color、border-color，甚至某些浏览器里 box-shadow 的模糊半径突变会导致卡顿。
更稳妥的做法：
- 明确列出要过渡的属性：
transition: opacity 0.3s, transform 0.3s ease-out - 如果多个类控制不同动效（比如一个控透明，一个控位移），分开写
transition-property，避免互相干扰 - 注意
transform和opacity是 GPU 加速友好属性；而height、width触发 layout，性能差，尽量用transform: scaleY()替代
JavaScript 触发过渡前要强制重排吗
有时要，但别乱加。典型场景是：元素初始为 display: none，切类后想让它淡入。这时得先设成 display: block（或其他可见值），再设 opacity: 0，最后加过渡类——中间必须有一次“强制样式计算”让浏览器记住起始态。
安全做法（兼容性好）：
- 先设置非过渡属性（如
display、visibility） - 立即读一个布局相关属性：
element.offsetHeight或getComputedStyle(element).height - 再设置过渡属性（如
opacity: 0）和过渡类
这个 offsetHeight 调用会触发重排，把当前样式状态固化下来，后续改 opacity 才能真正触发过渡。
复杂点在于：不同浏览器对“何时算起始帧”的判定略有差异，尤其是涉及 will-change 或 CSS 自定义属性时，得实测。最易被忽略的是——过渡时间设得太短（比如 0.05s），人眼根本看不出，误以为没生效。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
