javascript - 如何解决这个问题？页面转换的 GSAP 动画只有第一次才能完美工作

Question

我正在使用带有 Gsap 的 barba.js。这个想法是从主页和关于页面的过渡，带有一个居中的标志动画，非常简单。我点击我的按钮，过渡进来了，标志从 0 到 1，然后逐渐消失，太棒了！

第一个动画按原样工作，但不幸的是，当我再次单击时，比例因子现在丢失了。

我该如何解决这个问题以使其正常工作？看看我的代码笔项目：

https://codepen.io/cat999/project/editor/AEeEdg

这里是我的 JS

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

function pageTransition() {
    var tl = gsap.timeline();


    tl.to(".loading-screen", {
        duration: 1,
        width: "100%",
        left: "0%",
        ease: "Expo.easeInOut",
    });



      tl.to("#svg-1", {
       duration: 1,  opacity: 0,  y: 30, stagger: 0.4, delay: 0.2, 
    });


    tl.to(".loading-screen", {
        duration: 1,
        width: "100%",
        left: "100%",
        ease: "Expo.easeInOut",
        delay: 0.3,
    });

      tl.set(".loading-screen", { left: "-100%", });
      tl.set("#svg-1", { opacity: 1,  y: 0 });
}

function contentAnimation() {
    var tl = gsap.timeline();
    tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}

$(function () {
    barba.init({
        sync: true,

        transitions: [
            {
                async leave(data) {
                    const done = this.async();

                    pageTransition();
                    await delay(2000);
                    done();
                },

                async enter(data) {
                    contentAnimation();
                },

                async once(data) {
                    contentAnimation();
                },
            },
        ],
    });
});

标签： javascriptjquerycssgsapbarbajs