如何通过JavaScript正确实现CSS动画反向播放

安全阿岳

2026-9-1

问题根源

你的反向播放逻辑失效是两个逻辑问题导致的：

执行顺序写反了：你先执行classList.toggle('animationToggler')再判断类是否存在。第二次点击触发时，toggle会先把绑定动画的animationToggler类直接删掉，元素上根本没有挂载animationTogglerMenu动画，此时设置animationDirection: reverse找不到作用的动画对象，自然不会生效。
动画机制理解错了：只要把携带animation属性的类从元素上移除，浏览器会立刻终止动画，直接把元素状态重置为动画初始值，根本不会走反向播放的流程。

修复方案

不要反复增删绑定动画的类，直接把动画固定绑定在汉堡按钮元素上，通过切换动画方向、控制播放状态实现正反向旋转，完全匹配你要的交互效果：
首先修改CSS，把动画绑定到.hamburger类上，默认暂停、动画结束后保持最终状态，原来的.animationToggler类可以直接删除：

.hamburger {
  animation: animationTogglerMenu .8s ease forwards;
  animation-play-state: paused;
}

然后修改JS逻辑，点击时根据当前激活状态切换动画方向，重置播放进度后启动动画：

const menuToggler = document.querySelector('.toggler .hamburger');
menuToggler.addEventListener('click', function() {
  const isActive = this.classList.contains('active');
  // 未激活时正向播放旋转到720度，已激活时反向播放转回初始角度
  this.style.animationDirection = isActive ? 'reverse' : 'normal';
  // 重置动画进度到起点，保证每次点击动画都从头开始执行
  this.getAnimations()[0].currentTime = 0;
  this.style.animationPlayState = 'running';

  setTimeout(() => {
    this.classList.toggle('active');
    // 动画播放完成后暂停，避免页面重绘时动画意外触发
    this.style.animationPlayState = 'paused';
  }, 400)
});