如何为animationend动画结束事件添加事件监听器替代setTimeout

修改步骤 #

1. 剥离原有setTimeout内的重置逻辑 #

先找到你现有resetPage函数里的setTimeout代码块，把里面所有页面重置的逻辑单独抽出来，删掉原有的定时器代码。
举个原来的代码示例参考：

// 旧的resetPage逻辑
function resetPage() {
  document.body.classList.add('fade-out'); // 触发淡出动画
  // 要删掉的定时器部分
  setTimeout(() => {
    // 这里是原有的重置逻辑：比如隐藏播放器、移除Exit按钮、恢复初始布局等
    document.querySelector('.video-player').style.display = 'none';
    document.querySelector('.exit-btn').remove();
    document.body.classList.remove('fade-out');
    // 其他你原来写的重置代码
  }, 600) // 和动画时长绑定的定时时间
}

2. 替换为animationend事件监听方案 #

修改后的resetPage代码如下，用事件监听代替定时器，自动捕获动画结束时机：

// 新的resetPage逻辑
function resetPage() {
  const bodyEl = document.body;
  // 先触发淡出动画
  bodyEl.classList.add('fade-out');

  // 动画结束后的处理函数
  function onFadeOutFinish(e) {
    // 可选：如果页面有多个动画，加判断确保只响应你的淡出动画，fadeOut换成你CSS里定义的动画名
    if (e.animationName !== 'fadeOut') return;

    // 把你原来写在setTimeout里的所有重置逻辑原封不动放到这里
    document.querySelector('.video-player').style.display = 'none';
    document.querySelector('.exit-btn').remove();
    bodyEl.classList.remove('fade-out');
    // 其他原有重置代码
  }

  // 给body绑定一次性动画结束监听，执行完自动销毁，不会重复触发
  bodyEl.addEventListener('animationend', onFadeOutFinish, { once: true });
}

3. 确认Exit按钮的点击绑定 #

确保你点击Exit按钮的回调是调用修改后的resetPage即可：

document.querySelector('.exit-btn').addEventListener('click', resetPage);

额外说明 #

如果你的淡出动画不是加在body元素上，只需要把上面代码里的监听对象换成你实际加动画的DOM元素即可。

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