-1

我正在试验 Barba.js。我想要做的是当从一个页面转换到另一个页面时，我想看到 3 个颜色页面的动画首先加载为画布效果。不幸的是，只有第一个画布在加载时发生，但其他三个不存在。我在 main.js 中尝试了一些组合，我向您展示其中一种。

你可以在这里看到这个

$(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？

4

2 回答 2

0

如果我对您的理解正确，您的页面过渡包括一些覆盖改变其颜色 3 次，但它只改变它的颜色一次？

如果是这样，我认为问题是done()由于您第一次调用await delay(1000). 调用 done 基本上会告诉 Barba 可以将下一个页面加载到 DOM 中，并且您的其余代码leave()可能不会被执行。

于 2020-06-24T19:25:35.597 回答
-1

这对我有用

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

                changePage();
                await delay(1000);
                done()
    },
    async enter(data) {
        
    //    return enterAnimation()
    }
  }]
于 2021-03-14T09:41:39.640 回答