Barba Js reloads page on first time links

Question

I use Barba js v.2, in a Wordpress site.

The first time I click on a link the page changes in the address bar, but immediately it redirects on my page. The second time I click on the same link, the page changes and the transition works perfectly.

Why do I need to click two times on the same link to change the page and make the transition working?

I use also the plugin W3 Total Cache on Wordpress. Any conflict?

Thanks!

Answer 1

it is if your load encounter a error and it forces a reload. but while reloading it saves the page on "cache". so... the next time you click the link it will force from the cache... instead of reloading

this code helps you track where your code is breaking

barba.init({
transitions: [{
    debug: true,
    name: 'transiontion name',
    before(data) {
        console.warn('01 - Before --> Start <-');
            //create code here
        console.warn('01 - Before --> End <-');

    },
    beforeLeave(data) {
        console.warn('02 - beforeleave --> Start <-');
            //create code here
        console.warn('02 - beforeleave --> End <-');
    },

    leave(data) {
        console.warn('03 - leave --> Start <-');
            //create code here
        console.warn('03 - leave --> End <-');
    },

    afterLeave(data){
        console.warn('04 - afterLeave --> Start <-');
            //create code here
        console.warn('04 - afterLeave --> End <-');
    },

    beforeEnter(data){
        console.warn('05 - beforeEnter --> Start <-');
            //create code here
        console.warn('05 - beforeEnter --> End <-');
    },

    enter(data) {
        console.warn('06 - enter --> Start <-');
            //create code here
        console.warn('06 - enter --> end <-');
    },

    afterEnter(data){
        console.warn('07 - afterEnter --> Start <-');
            //create code here
        console.warn('07 - afterEnter --> End <-');
    },

    after(data){
        console.warn('08 - after --> Start <-');
            //create code here
        console.warn('08 - after --> End <-');
    }
}]

});