时间戳

首页 > 解决方案 > 使用 Barba.JS 进行页面转换后 JS 内容不起作用

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

问题描述

我正在使用 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%'
    });
}

任何帮助表示赞赏！

标签： javascriptcssgsapbarbajs

解决方案

就在几周前，我把互联网颠倒过来寻找解决这个问题的方法。

本质上，当您使用 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。

推荐阅读