Exemple animation don't triggers correctly about barba HOT 6 CLOSED

Holy hell I forgot to remove this one :/

Thanks for the help and sorry for the loss of time ^^

Cheers !

from barba.

Hi @arnaud-xp !
Thanks for using Barba.js!

this.newContainer element is by default as visibility: hidden.
You can check the documentation for more information.

So, just changing your code to:

$(this.newContainer).css({
    opacity: 0,
    visibility: 'visible'
});

Should work :)

Feel free to close the ticket if the problem is solved

from barba.

Hi @luruke !

I just made the change but the problem stays the same :/

Any other clue ?

Cheers !

from barba.

Are you sure?
I just tested the Transition and it works fine.

Just to be clear, the final code should be something like:

var AwesomeTransition = Barba.BaseTransition.extend({
    start: function () {
        Promise
            .all([
                this.newContainerLoading,
                this.fadeOut()
            ])
            .then(this.fadeIn.bind(this));
    },
    fadeIn: function () {
        var _this = this;

        $(this.oldContainer).hide();

        $(this.newContainer).css({
            opacity: 0,
            visibility: 'visible'
        });
        $(this.newContainer).animate({opacity: 1}, 750, function () {
            _this.done();
        });
    },
    fadeOut: function () {
        return $(this.oldContainer).animate({opacity: 0}, 750).promise();
    }
});

If the problem persist, try to check if you may have some CSS rule that interfere, or try to post a working example somewhere.

Cheers

from barba.

Hey again !

I double checked your code, we have the same thing. I didn't found any css rules interfering but if you want to have a look, check here => http://350bf6a3.ngrok.io/

Click on menu and then switch pages by clicking on the logo or on the link "A propos"

Cheers !

from barba.

Hey again

You have a nice CSS rule:

* {
    transition: all ease 0.3s;
}

Not only this is a performance killer, but also means that every time jQuery update the opacity tween there is a css transition on it.

Removing solve it.

Let me know if it works

from barba.