为什么 GSAP 输入不透明度 animation 无法正常工作？

Question

我正在使用带有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
        });
    }
    
}]

});

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

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

Answer 1

更新

变通解决方案：

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

我们不使用gsap.from ，而是将 gsap.to 与单独的 jS gsap.to结合使用，以在过渡中间将不透明度重置为 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，如下所示：

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

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