Question

我正在尝试Barba.js。我想做的是从一个页面过渡到另一个页面时，我想查看3色页面的动画作为画布效果首先加载。不幸的是，只有第一个画布在加载时发生，而其他三个则不存在。我在main.js中尝试了几种组合，向您展示了其中一种。

您可以实时观看此here

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

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

                    pageTransition();
                    await delay(1000);


                    pageTransitionTwo();
                    await delay(1000);


                    pageTransitionThree();
                    await delay(1000);
                    done();
                },

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

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

我该如何以不同的延迟运行加载屏幕一个，加载屏幕两个和加载屏幕三个，一个又一个地使用barba.js？

Answer 1

如果我对您的理解正确，那么您的页面过渡将由一些覆盖层组成，这些覆盖层会更改其颜色3次，但仅会更改其颜色一次？

如果是这样，我认为问题是您因为第一次调用done()而在1000毫秒后就已经调用await delay(1000)了。完成调用将基本上告诉Barba，下一页可以加载到DOM中，而leave()中的其余代码可能没有执行。

Answer 2

这对我有用

transitions: [{
    name: 'transition-name',
    async leave(data) {
        const done = this.async();

                changePage();
                await delay(1000);
                done()
    },
    async enter(data) {
        
    //    return enterAnimation()
    }
  }]

Barba.js过渡多个页面

2 个答案: