通过超链接进入页面时CSS动画不生效的问题排查

问题出在浏览器的前进/后退缓存（Back-Forward Cache，简称BF Cache）：

• 通过超链接导航页面时，浏览器为提升性能会完整缓存之前访问过的页面（包括DOM状态、CSS动画执行状态）
• 此时页面不会重新初始化，CSS动画的初始触发条件（如页面加载时的animation或transition）已执行过，自然不会再次触发
• 你添加的强制重载脚本虽能让动画生效，但会触发完整页面加载流程，导致重复渲染的卡顿

无需强制刷新页面，用以下方法修复动画触发问题：

方法1：监听pageshow事件重置动画状态 #

利用浏览器pageshow事件（页面从缓存恢复时触发），手动重置动画元素状态：

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    const animateElements = document.querySelectorAll('.animate-target');
    animateElements.forEach(el => {
      el.classList.remove('animate-class');
      // 强制浏览器重绘
      void el.offsetWidth;
      el.classList.add('animate-class');
    });
  }
});

原理：通过移除再重新添加动画类，结合void el.offsetWidth触发浏览器重绘，让动画重新执行。

方法2：用animation-play-state控制动画 #

给动画元素设置默认暂停状态，在页面加载或从缓存恢复时启动：

.animate-target {
  animation: fadeIn 1s forwards;
  animation-play-state: paused;
}

搭配JS控制播放：

function startAnimation() {
  const elements = document.querySelectorAll('.animate-target');
  elements.forEach(el => el.style.animationPlayState = 'running');
}

window.addEventListener('load', startAnimation);
window.addEventListener('pageshow', function(e) {
  if (e.persisted) startAnimation();
});

方法3：禁用BF Cache（不推荐，影响性能） #

如果以上方法不适用，可通过空unload事件禁用缓存，但会牺牲导航性能：

window.addEventListener('unload', function() {});

仅作为最后备选方案。

• 避免使用location.reload()强制刷新，这是对性能影响最大的方案
• 优先选择pageshow事件结合DOM状态重置的方式，既保证动画触发，又保留浏览器缓存优化

内容的提问来源于stack exchange，提问作者Nathan Vidal