页面回退时transition不触发是因为bfcache冻结dom状态，需用sessionstorage存状态+pageshow事件监听persisted标志，配合强制重排（如settimeout）再添加动画类来触发过渡。
页面回退时Transition不触发？本质是浏览器缓存了DOM状态
浏览器前进/后退时默认启用 bfcache（Back/Forward Cache），DOM 和 CSS 状态被完整冻结并复原，transition 不会重播——哪怕你手动加了 class 或改了 style，浏览器也认为“没变”。这不是 bug，是性能优化机制。要让 transition 在回退时“看起来像重新进入”，必须绕过 bfcache 的静默还原逻辑。
用 sessionStorage 记录状态 + pageshow 事件判断回退
pageshow 事件比 load 更可靠：它在页面从 bfcache 恢复时也会触发，且带 event.persisted 标志。配合 sessionStorage 存储上次操作的类名或状态标识，就能在回退瞬间补上过渡所需的 class 切换。
常见错误是只监听 load 或 DOMContentLoaded，它们在 bfcache 恢复时不触发；还有人用 visibilitychange，但该事件无法区分前进/后退。
- 监听
pageshow，检查event.persisted === true - 从
sessionStorage读取上次保存的类名（如"is-open"） - 先移除目标元素的过渡类（如
"animate-in"），再setTimeout(..., 0)强制重排，最后加回类名触发 transition - 确保 CSS 中
transition定义在基础状态上（比如.panel { transition: transform 0.3s ease; }），而不是仅在临时类里
window.addEventListener('pageshow', (e) => {
if (e.persisted) {
const savedClass = sessionStorage.getItem('ui-state');
if (savedClass && document.body.classList.contains(savedClass)) {
const el = document.querySelector('.target');
el.classList.remove('animate-in');
setTimeout(() => {
el.classList.add('animate-in');
}, 0);
}
}
});
为什么不能只靠 history.state？
history.state 在页面回退时确实可用，但它有硬伤：它只在通过 history.pushState() / replaceState() 主动写入的状态下才存在；用户直接点击浏览器后退按钮、或关闭标签页再从历史记录打开，history.state 就是 null。而 sessionStorage 只要标签页没关，数据就一直有效，更鲁棒。
另一个坑是：不要在 pagehide 里清空 sessionStorage。有些开发者想“清理旧状态”，结果导致回退时读不到值。除非你明确知道这次离开是永久性的（比如跳转到外部域名），否则别碰它。
CSS 类名切换必须满足“重排+重绘”条件
单纯 el.classList.add('fade-in') 在 bfcache 恢复后不会触发 transition，因为浏览器认为样式没变。必须制造一次 layout thrashing：
- 先移除触发 transition 的类（或设为初始值）
- 强制重排：用
getComputedStyle(el).height或setTimeout(..., 0)（后者更轻量） - 再加回类名
注意：如果 transition 依赖多个属性（如 opacity 和 transform），确保它们都在同一时刻被应用；否则可能只动一个，另一个卡住。CSS 中避免写 transition: all 0.3s，精确声明属性更可控。
pageshow 的 persisted 值必须校验，且 class 切换必须带重排环节——少任何一个，transition 就静音。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
