已有页面进入CSS动画，如何实现页面离开时触发动画？

当然可以实现，下面给你两种场景的具体实现方法：

1. 先调整CSS：拆分进入和离开动画 #

把原有的进入动画和新增的离开动画分开，方便JS触发：

.clean {
  content: url(/HPA/Clean.svg);
  width: 81%;
  margin-top: 39.5%;
  left: 120%;
  position: absolute;
  animation-duration: 3s;
  animation-name: enter;
  animation-fill-mode: forwards;
  transition: ease-in;
}

/* 进入页面的动画 */
@keyframes enter {
  to {
    margin-left: -110.3%;
  }
}

/* 离开页面的反向动画类 */
.clean-leave {
  animation-name: leave;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

@keyframes leave {
  to {
    left: 120%;
    margin-left: 0;
  }
}

2. 用JS监听离开事件触发动画 #

根据不同的“离开”场景，选择对应的事件监听：

场景一：用户关闭标签页、刷新页面 #

用beforeunload事件，但注意：浏览器为了导航效率，可能不会等动画完全播放完就跳转，所以动画可能只显示一部分：

const cleanEl = document.querySelector('.clean');

window.addEventListener('beforeunload', () => {
  cleanEl.classList.add('clean-leave');
  // 尝试延迟导航，效果取决于浏览器
  return new Promise(resolve => setTimeout(resolve, 3000));
});

场景二：用户切换到其他标签页（页面隐藏） #

用visibilitychange事件，这种场景下动画可以完整播放，还能处理用户切回页面的重置逻辑：

const cleanEl = document.querySelector('.clean');

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 页面隐藏时触发离开动画
    cleanEl.classList.add('clean-leave');
  } else {
    // 用户切回页面，重新播放进入动画
    cleanEl.classList.remove('clean-leave');
    // 重置动画需要触发重绘
    cleanEl.classList.remove('clean');
    void cleanEl.offsetWidth;
    cleanEl.classList.add('clean');
  }
});

注意事项 #

• beforeunload的动画效果受浏览器限制，部分浏览器会直接跳过延迟，优先完成导航；
• 如果你需要确保动画状态被记录（比如统计），可以配合navigator.sendBeacon在动画触发时发送数据，但动画本身的展示还是依赖浏览器行为。

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