CSS过渡未触发主因是浏览器未检测到样式起始状态变化，需确保切换前后目标属性值真实改变，并通过强制重排（如offsetHeight）固化起始态。
transition为什么加了类也不动
直接给元素加
属性，再用 JavaScript 切换类，但动画没触发——大概率是浏览器没检测到“样式变化的起始状态”。CSS 过渡只在属性值**发生改变的那一刻**开始计时，如果新旧类里目标属性值在切换瞬间“看起来一样”，过渡就跳过。
常见踩坑点：
旧类和新类里
都是
，切过去自然没变化
用
→
切换，
本身不支持过渡，且
状态下其他过渡属性也被重置
类切换后，目标属性被内联样式或更高优先级规则覆盖，实际没变
必须用 classList.toggle() 吗？
不是。关键不在方法名，而在**确保样式计算值真实变化**。用
、
或
都行，但要注意时机：
不要在一次同步任务里连续 add + remove —— 浏览器可能合并渲染，过渡失效
如果需要“先收再展”，得等上一个动画结束：监听
事件，或用
拿当前值做判断
避免在
回调外直接读写样式（如
强制回流）——容易打断过渡链
transition-property 写 all 有风险吗
有。写
看似省事，但会过渡所有可动画属性，包括你没打算动的
、
，甚至某些浏览器里
的模糊半径突变会导致卡顿。
立即学习
“
Java免费学习笔记（深入）
”；
更稳妥的做法：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
明确列出要过渡的属性：
如果多个类控制不同动效（比如一个控透明，一个控位移），分开写
，避免互相干扰
注意
和
是 GPU 加速友好属性；而
、
触发 layout，性能差，尽量用
替代
JavaScript 触发过渡前要强制重排吗
有时要，但别乱加。典型场景是：元素初始为
，切类后想让它淡入。这时得先设成
（或其他可见值），再设
，最后加过渡类——中间必须有一次“强制样式计算”让浏览器记住起始态。
安全做法（兼容性好）：
先设置非过渡属性（如
、
）
立即读一个布局相关属性：
或
再设置过渡属性（如
）和过渡类
这个
调用会触发重排，把当前样式状态固化下来，后续改
才能真正触发过渡。
复杂点在于：不同浏览器对“何时算起始帧”的判定略有差异，尤其是涉及
或 CSS 自定义属性时，得实测。最易被忽略的是——过渡时间设得太短（比如
），人眼根本看不出，误以为没生效。
transitionopacity1display: nonedisplay: blockdisplaynoneelement.classList.add().remove().toggle()transitionendgetComputedStyle(element).propertyNamerequestAnimationFrameoffsetHeighttransition: all 0.3scolorborder-colorbox-shadowtransition: opacity 0.3s, transform 0.3s ease-outtransition-propertytransformopacityheightwidthtransform: scaleY()display: nonedisplay: blockopacity: 0displayvisibilityelement.offsetHeightgetComputedStyle(element).heightopacity: 0offsetHeightopacitywill-change0.05s