CSS transition 依赖属性值变化而非 class 增删；需用 offsetWidth 或 requestAnimationFrame 强制重排，或在基础 class 上定义 transition，或改用 animation 实现可靠重播。
transition 触发后 class 移除又加回无效
CSS transition 依赖属性值的「变化」，不是依赖 class 的增删。如果快速移除再添加同一个 class，浏览器可能合并重排，导致没有「从 A 到 B」的计算过程，过渡就跳过了。
- 用
getComputedStyle强制触发重排（layout thrashing），让浏览器先读取当前样式，再改 class - 避免在单次事件循环中连续操作 class：加 delay 或用
requestAnimationFrame - 更稳妥的做法是用不同 class 名区分状态，比如
.open→.closing→.closed，而非反复切换同一 class
用 JavaScript 控制 transition 重播的可靠写法
想让同一个 transition 多次生效，关键不是“重置 class”，而是“制造两次独立的状态变化”。常见错误是：
element.classList.remove('active');
element.classList.add('active');这在微秒级内完成，浏览器直接复用最终样式。
- 先移除 class 后，用
void element.offsetWidth（或getComputedStyle(element).height）强制同步计算 - 再加回 class —— 此时浏览器会重新记录起始值，过渡就能重跑
- 或者用
setTimeout(..., 0)把加 class 推到下一帧，但不如offsetWidth精确可控
transition 属性写在哪个 class 上很重要
很多人把 transition 写在触发 class（如 .active）里，结果移除 class 后过渡不反向执行——因为 transition 没了，自然没效果。
-
transition必须写在「基础状态」的 class 上（通常是默认无修饰的元素选择器或.base类） - 例如：
.box {这样无论加还是删
opacity: 0;
transition: opacity 0.3s ease;
}
.box.active {
opacity: 1;
}.active，过渡都会双向生效 - 如果只在
.active里写transition，删 class 时相当于从「有 transition」切到「无 transition」，浏览器直接跳变
用 animation 替代 transition 实现可重复播放
当需要严格控制每次播放、且不依赖状态差值时，@keyframes + animation 更可靠。它不关心起止值，只按帧执行。
立即学习“前端免费学习笔记（深入）”；
- 给元素加
animation: fadeIn 0.3s不会自动重播；需先移除动画名，再加回 - 推荐用 JS 动态切换：
element.style.animation = 'none';
element.offsetHeight; // 强制重排
element.style.animation = 'fadeIn 0.3s'; - 注意：
animation-fill-mode设为forwards可保持末帧状态，但重播前必须清空动画名，否则无效
