使用 Barba.JS 进行页面转换后 JS 内容不起作用答案

【问题标题】：JS content not working after a page transition using Barba.JS使用 Barba.JS 进行页面转换后 JS 内容不起作用
【发布时间】：2021-10-04 08:13:40
【问题描述】：

我正在使用 Barba.js 和 GSAP 为我的网站创建页面转换。在看了一些教程并摆弄了一下之后，我设法在两个页面之间创建了一个幻灯片过渡。事情是我还有其他 javascript 内容，用于每个页面上的其他功能元素。在第一个页面加载时，一切似乎都正常。

然后我点击一个链接转换到下一页，转换很顺利，但突然间我在同一个 JS 文件中编写的所有元素都不再起作用了。

我仍然可以在每个页面之间完美转换，但其他 JS 内容似乎都没有工作。我在控制台中没有收到任何错误，所以我不知道这里到底发生了什么。

这是我的 Barba 初始化的样子。

barba.init({
    sync: true,

    transitions: [{
        async leave(data) {
            const done = this.async();
            animationLeave();
            await delay(1000);
            done();
        },
        enter(data) {
            animationEnter();
        },
        once(data) {
            animationEnter();
        }

    }, {
        name: 'home-transition',
        to: {
            namespace: ['home']
        },

        async once(data) {
            homeAnimation();
        }

    }]
});

AnimationEnter、AnimationLeave 和 HomeAnimation 方法只是链接到 GSAP 动画。 例如，这里是 AnimationLeave 的样子：

function animationLeave() {
    var tl = gsap.timeline();
    tl.to('.loading-screen', {
        duration: 1,
        width: '100%',
        left: '0%',
        ease: 'expo.easeInOut'
    });
    tl.to('.loading-screen', {
        duration: .8,
        width: '100%',
        left: '100%',
        ease: 'expo.easeInOut',
        delay: .3
    });
    tl.set('.loading-screen', {
        left: '-100%',
        width: '0%'
    });
}

感谢任何帮助！

【问题讨论】：

所以 gsap 和 Barba 运行良好，但其他脚本不起作用？
@Greg-- 据我所知，在第一次过渡之后，Barba 是唯一剩下的工作了。转换后，我立即在控制台中收到 GSAP 错误。我的其他脚本都不起作用。我已经在这里和 gsap 论坛上与 Barba 一起多次看到过这个问题。如果找不到任何东西，我正在考虑切换到 Swup。
您需要在每次加载另一个页面后调用您的脚本（使用 DOM 的女巫），因为 DOM 树已更改，但脚本没有更改。在 Swup 将是同样的事情
Barba 和 Swup 看起来像使用 AJAX 加载内容，您需要等到内容加载完毕然后调用您的脚本
转换后我立即在控制台中收到 GSAP 错误 >> 您遇到了什么类型的错误？

标签： javascript css gsap barbajs

【解决方案1】：

就在几周前，我翻遍了互联网，寻找解决这个问题的方法。

基本上，当您使用 BarbaJS 时，所有 JavaScript 在初始页面加载时只运行一次。从一页转换到另一页后，它不会重新初始化。这意味着当您转换到另一个页面时，该新页面上的所有 JavaScript 驱动的动画都将不起作用，除非在访问该网站时加载的第一个页面上存在这些动画元素。

要让页面特定的动画在转换后从一个页面工作到另一个页面，所有这些动画都必须重新初始化。您可以使用全局 Barba 挂钩来执行此操作：

barba.hooks.beforeEnter(() => {
    killEvents();
});

此代码将在转换之间显示下一页之前运行。如果您使用的是 ScrollTrigger 之类的东西或平滑滚动库的实例，您可以杀死这些实例，否则它们只会留下来并成为内存猪。如果不是，则无需删除任何事件。

barba.hooks.afterEnter(() => {
    addEvents();
});

这是重要的部分。转换后，您可以重新添加动画事件，如此处所示。

对我有帮助的另一件非常重要的事情是在返回或创建动画的函数中初始化 DOM 节点。如果您只是在初始页面加载时初始化 DOM 节点一次，而不是在每次转换时，您的动画代码将假定您仅在初始页面上为元素设置动画，即使页面已转换到另一个页面。

一些有帮助的 Greensock 论坛帖子：

https://greensock.com/forums/topic/26585-scrolltrigger-not-working-after-barba-transition/

https://greensock.com/forums/topic/24365-problem-with-killing-and-reinitialising-scrolltrigger-after-single-page-app-page-transition/

TL；DR，在每次页面转换时重新初始化您的 JavaScript。

【讨论】：