GSAP中showMenuList菜单动画无法反向播放的问题如何解决

算力阿峰

2026-9-2

GSAP粉色菜单反向播放失效修复

核心错误点

动画实例重复创建：showMenuList每次点击触发时都会新建一个GSAP时间线实例，之前的动画状态完全没有被保存，调用reverse()时操作的是刚创建的空实例，没有任何效果。
配置属性拼写错误：GSAP时间线的暂停配置属性为paused，原代码写为pause缺少尾字母d，配置不生效。
执行顺序错误：原代码先调用play()/reverse()控制播放，之后才往时间线里添加动画补间，控制指令执行时时间线还是空的，后续添加的动画不会响应之前的控制逻辑。
冗余写法：GSAP 3.x版本不需要用css: {}包裹CSS动画属性，直接写属性即可被自动识别。

修正后完整JS代码

const menuToggler = document.querySelector(".toggler");
const menuTogglerHamburger = document.querySelector(".toggler .hamburger");

// 在外层作用域初始化时间线，全局仅创建一次
const showMenuTl = gsap.timeline({ paused: true });
// 提前配置好所有动画补间
showMenuTl
  .to(".nav-menu", 0.8, { top: "50%" })
  .to(".nav-menu", 0.4, { width: "140vw", height: "140vw" });

menuToggler.addEventListener("click", function () {
  // 处理汉堡按钮旋转动画
  if (menuTogglerHamburger.classList.contains("animationToggler")) {
    menuTogglerHamburger.classList.remove("animationToggler");
    void menuTogglerHamburger.offsetWidth;
    menuTogglerHamburger.classList.add("animationToggler");
  }
  menuTogglerHamburger.classList.add("animationToggler");

  // 切换菜单显示状态
  menuToggler.classList.toggle("show");
  // 直接复用已创建的时间线实例控制播放方向
  menuToggler.classList.contains("show")
    ? showMenuTl.play()
    : showMenuTl.reverse();

  setTimeout(() => {
    // 处理汉堡按钮转叉号动画
    menuTogglerHamburger.classList.toggle("active");
  }, 200);
});