使用Barba.js完成页面过渡后，如何重新加载JS脚本？

问题原因 #

Barba.js采用**单页应用(SPA)**机制，不会刷新整个页面，仅替换标记为data-barba="container"的DOM内容。你的初始JS动画代码只在页面首次加载时执行，过渡完成后会出现两个核心问题：

• 旧DOM元素被移除后，绑定在它们身上的事件监听、动画实例也随之失效
• 新加载的DOM元素未被初始化代码处理，自然无法触发动画

解决办法 #

核心思路是将动画初始化逻辑封装为可复用函数，在Barba的过渡钩子中重新执行，同时清理旧状态避免冲突。

步骤1：封装动画初始化与清理函数 #

把所有需要执行的动画、事件监听逻辑放到独立函数里，同时添加清理函数避免内存泄漏：

// 清理旧动画与事件监听
function cleanUpOldAnimations() {
  // 清除GSAP所有未完成的动画实例
  gsap.killTweensOf("*");
  // 移除旧元素的事件监听（示例）
  const oldBtn = document.querySelector('.action-btn');
  if (oldBtn) {
    oldBtn.removeEventListener('click', handleBtnClick);
  }
}

// 初始化所有页面动画与交互
function initAnimations() {
  // 示例：GSAP元素淡入动画
  gsap.from('.animate-item', { opacity: 0, y: 20, duration: 0.6, stagger: 0.2 });
  // 示例：绑定按钮点击事件
  document.querySelector('.action-btn').addEventListener('click', handleBtnClick);
}

// 示例交互函数
function handleBtnClick() {
  console.log('按钮触发交互');
}

步骤2：修改Barba配置，在钩子中调用函数 #

利用Barba的once（首次加载）、leave（离开旧页面）、enter（进入新页面）钩子，整合上述函数：

const wipe = document.querySelector(".wipe-transition");
const tlTrans = gsap.timeline();

function delay(n) {
  return new Promise((done) => {
    setTimeout(() => {
      done();
    }, n);
  });
}

barba.init({
  sync: true,
  transitions: [
    {
      async leave(data) {
        const done = this.async();
        // 离开前清理旧状态
        cleanUpOldAnimations();
        
        tlTrans.to(wipe, {
          left: "0%",
          ease: "power2.out",
          duration: 0.5,
        });

        await delay(1000);
        done();
      },

      enter(data) {
        tlTrans
          .to(wipe, {
            left: "100%",
            ease: "power2.in",
            duration: 0.5,
          })
          .set(wipe, { left: "-100%" });
        
        // 进入新页面后初始化动画
        initAnimations();
      },
    },
  ],
  // 首次页面加载时执行初始化
  once() {
    initAnimations();
  }
});

额外注意事项 #

• 确保页面结构合规：所有需要替换的内容必须包裹在data-barba="container"标签内
• 若使用第三方JS库，需同步将其初始化逻辑放入initAnimations函数
• 必须清理旧动画与事件监听，否则会引发内存泄漏和动画冲突

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