1

我正在使用带有barba.js的GSAP来创建平滑的页面转换，但我有一个无法调试的错误。转换本身按预期工作，页面淡入淡出，发生 pjax 调用，页面内容更新，然后新页面内容淡入。

但是，一旦页面淡入，如果我通过转到另一个页面来重复转换，淡入不透明度会在达到其最终值“1”之前卡住。我已经跨页面对此进行了测试，无论使用哪个进入/离开页面，第一个转换总是正确的。

我的问题是为什么？这是我使用 GSAP 的 barba.js：

barba.init({

transitions: [{

    name: 'test-transition',

    leave(data) {
        return gsap.to(data.current.container, {
            opacity: 0 // works correctly
        });
    },

    afterLeave() {
        reinitModal(); // works correctly
    },

    beforeEnter: ({ next }) => {
        window.scrollTo(0, 0); // works correctly
        reinitCounter(); // works correctly
        reinitScripts(); // works correctly, note this doesn't reinitialise this jS file
    },

    enter(data) {
        return gsap.from(data.next.container, {
            opacity: 0 // problem child, only on cycles after the first one
        });
    }
    
}]

});

请参阅下面的控制台图像，显示在第二页加载时随机百分比停止不透明度。

安慰

有没有人遇到过这种情况，有已知的解决方案吗？

4

1 回答 1

0

更新

解决方法：

尽管在几个论坛上进行了询问并进行了几个小时的调试，但我无法深入了解这一点，因此我创建了一个小变通解决方案，它不会产生明显的性能延迟等。

gsap.from我们没有使用gsap.to结合单独的 jS 函数来在转换中间将不透明度重置为 0，而不是使用。以下是解决方法转换：

barba.init({
    // debug: true,
    // logLevel: 'error',
    transitions: [{
        name: 'test-transition',

        leave(data) {
            reinitProjectDetails();
            return gsap.to(data.current.container, {
                opacity: 0
            });
        },

        afterLeave() {
            reinitModal();
        },

        beforeEnter: ({ next }) => {
            window.scrollTo(0, 0);
            reinitTitleScene();
            reinitScripts();
            reinitOpacity(); // this is calling our external opacity reset script
            reinitHeader();
        },

        enter(data) {
            return gsap.to(data.next.container, { // note gsap.to instead of gsap.from
                opacity: 1, // animating Opacity value to '1' rather than from '0'
                delay: 0.45, // makes for a smoother transition
            });
        }
        
    }]
});

过渡脚本之外是不透明度重置/重新初始化函数，如下所示：

function reinitOpacity() {
    $('main').css("opacity", "0"); // note see below
}

请注意，“主”容器是具有“barba-container”类的容器。我希望这可以帮助有需要的人。

于 2020-12-08T17:51:48.777 回答