Barba.js 转换多个页面

Question

I am experimenting on Barba.js. What i am trying to do is when transitioning from page to page, i want to see the animation of 3 colour-pages to load up first as a canvas effect. Unfortunately, only the first canvas happens on load but the other three are non-existent. I tried a few combinations in main.js, i show you one of them.

You can see this live 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();
                },
            },
        ],
    });
});

How can i run loading-screen-one, loading-screen-two & loading-screen-three with a difference delay, the one after the other with barba.js?

Answer 1

If i have understood you correctly, your page transition consists of some overlay changing its color 3 times, but it is only changing its color once?

If so, i think the problem is that you are calling done() already after 1000 milliseconds because of your first call of await delay(1000) . Calling done will basically tell Barba that the next Page can be loaded into the DOM and the rest of your code in leave() is probably not being executed.

Answer 2

this works for me

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

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