CSS过渡本身不被缓存，但“不触发”常因属性不可动画、新旧值相同或未强制重排导致；应使用可过渡属性、class切换替代内联样式、避免transition-delay冲突。
CSS 过渡（transition）本身不会被浏览器“缓存”，但你感知到的“过渡不触发”或“突然跳变”，通常是因为样式变更未满足触发条件，或浏览器复用旧渲染状态导致视觉上像“被缓存”。关键不在清缓存，而在确保每次触发都满足 属性可过渡 + 状态真实变化 + 重排/重绘被正确触发。
确保 transition 属性作用于可动画的 CSS 属性
只有 CSS 动画属性列表 中的属性才能被 transition 驱动。比如：opacity、transform、color、width（需有明确数值单位）等可以；而 display、visibility、height: auto、position（值本身不可插值）则无法过渡。
- ❌ 错误示例：
transition: display 0.3s;—— 不生效，display无中间态 - ✅ 替代方案：用
opacity+transform模拟隐藏，或配合max-height实现折叠动画
避免“样式未真正变化”导致过渡跳过
如果新旧值完全相同（如两次都设 opacity: 1），浏览器会跳过 transition。更隐蔽的是：JS 批量修改样式时，若在同一个渲染帧内连续设置同一属性，浏览器可能只取最后一次值，导致过渡丢失。
- ✅ 强制重排（reflow）再设新值：在修改前读取一个布局相关属性（如
offsetHeight），触发浏览器立即计算当前样式，再修改目标属性 - ✅ 使用
setTimeout(..., 0)或requestAnimationFrame分离读写操作 - ✅ 推荐做法（React/Vue 场景）：确保 class 切换或 style 更新发生在状态更新后的下一个渲染周期
用 force reflow + class 切换替代内联 style 反复赋值
直接用 JS 改 element.style.transition 或 .style.opacity 容易出竞态。更可靠的方式是预定义 CSS 类，用 className 切换来触发 transition。
立即学习“前端免费学习笔记（深入）”；
- ✅ CSS 定义：
.box { transition: opacity 0.3s ease; } .box.hidden { opacity: 0; } - ✅ JS 触发：
box.classList.add('hidden')—— 浏览器能准确识别“从非 hidden → hidden”的状态跃迁 - ✅ 如需多次重复触发（如按钮点击反复淡入淡出）：可先移除 class 再加回，或用
void element.offsetWidth强制同步布局
慎用 transition-delay 和多属性过渡冲突
多个 transition 声明（如 transition: opacity 0.3s, transform 0.3s）若延迟不同或持续时间不一致，容易造成错觉“某次没动”。同时，transition-delay 在快速连续触发时可能让动画排队或被覆盖。
- ✅ 单一、明确的 transition 目标：优先用
transition: all 0.3s ease（仅限调试），上线时明确写出需过渡的属性 - ✅ 避免 delay：如需分步动画，改用 CSS @keyframes 或 JS 控制时序
- ✅ 检查 computed style：用 DevTools 的 Styles 面板确认当前元素是否实际应用了 transition 规则，且目标属性值确实在变化
