如何销毁GSAP时间线并还原多元素绑定的SplitText实例？

DevOps 小满

2026-8-22

解决方案

核心问题分析

原代码仅在元素hover时创建SplitText和时间线实例，未hover的元素没有对应实例，导致revert无法覆盖所有元素
每次hover时重复绑定revert按钮的点击事件，造成事件冗余

具体修改步骤

统一存储所有动画实例：初始化一个数组，在遍历元素时就创建SplitText和GSAP时间线，并存入数组，确保所有目标元素的实例都被记录
避免重复绑定事件：将revert按钮的点击事件绑定移到遍历逻辑之外，只执行一次
实现完整的还原逻辑：遍历存储的实例数组，销毁时间线并调用SplitText的revert()方法还原文本状态

修改后的代码示例

// 全局数组存储所有动画实例
const navAnimations = [];

// 初始化所有导航元素的动画实例与事件
$('.nav-link').each(function() {
  const $el = $(this);
  // 提前创建SplitText实例
  const splitText = new SplitText($el, { type: 'words,chars' });
  // 创建暂停状态的时间线
  const animTl = gsap.timeline({ paused: true })
    .to(splitText.chars, { opacity: 0, stagger: 0.02 });
  
  // 将实例存入数组
  navAnimations.push({
    splitText,
    timeline: animTl,
    element: $el
  });
  
  // 绑定hover事件，直接复用已有时间线
  $el.hover(
    () => animTl.play(),
    () => animTl.reverse()
  );
});

// 仅绑定一次revert按钮的点击事件
$('#revert-btn').on('click', function() {
  navAnimations.forEach(item => {
    // 销毁时间线，清除所有动画状态
    item.timeline.kill();
    // 还原SplitText到初始文本状态
    item.splitText.revert();
    // 移除hover事件，防止后续误触发
    item.element.off('mouseenter mouseleave');
  });
  
  // 清空数组，避免重复处理
  navAnimations.length = 0;
});