How to use CSS animations?

[barbajs]

How to use CSS animations?

[luruke]

Hi @htor ,
thanks for the very detailed issue.

I think your issue is that fadeOut do not return a promise, so fadeIn is called immediately newContainerLoading is resolved.

You should rewrite your fadeOut as:

fadeOut: function() {
    $(this.oldContainer).toggleClass('fade-out');

    return new Promise(function(resolve, reject) {
        window.setTimeout(function() {
           resolve();
        }, 700);
    });
},

The best way would be to use the event onanimationend instead of a simple timeout.

I haven't tried but in this way everything should work, let me know :)

[htor]

Thanks a lot,

Got it to work now, by returning a promise, plus fixing my CSS. Had a comma after the from clause plus I needed to override the fade-in animation when the container has both animation classes set on it during the transition. Just hacked it with !important. Seems to work:

.fade-out { animation: fade-out .5s ease forwards !important; }
.fade-in { animation: fade-in .5s ease forwards; }

@keyframes fade-out {
    from { opacity: 1; } /* no comma here */
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; } /* no comma here */
    to { opacity: 1; }
}

Fade-out function:

fadeOut: function() {
    $(this.oldContainer).toggleClass('fade-out');

    return new Promise(function(resolve, reject) {
        window.setTimeout(function() {
           resolve();
        }, 700);
    });
},

With CSS:

[luruke]

Nice @htor .

I totally forgot to mention this "extension" made by @JoeeGrigg https://github.com/JoeeGrigg/barba-transitions

[htor]

@luruke that looks promising. By the way I published my barba test app here: https://github.com/htor/pjax-barba-test/

[RhysyG]

Hi guys, thanks for the help. I've followed these tips and was wondering if it's possible to remove the fadein class once it's finished? For example, fadein class is added, then fadeout is added and requires higher specificity in css to override. Can something like this be done?

fadeIn: function() {
  this.newContainer.classList.add('animate-fade-in');
  this.done();
  this.addEventListener('animationend', function(e) {
    this.newContainer.classList.remove('animate-fade-in');
  }, false);
}

[RhysyG]

@luruke

The best way would be to use the event onanimationend instead of a simple timeout.

Could you please provide an example of the onanimationend event?

I have tried the following, it works the first time, but on the second click I get "Uncaught TypeError: Cannot read property 'removeChild' of null".

this.newContainer.addEventListener('animationend', function(e) {
_this.done();
}

Any ideas?

[RhysyG]

I have tried the following, it works the first time, but on the second click I get "Uncaught TypeError: Cannot read property 'removeChild' of null".

For anyone stumbling across this, I had to REMOVE the event listener after I added it otherwise it would try to call twice.

newContainer.addEventListener("animationend",function handler() {
  _this.done();
  newContainer.removeEventListener("animationend",handler);
  newContainer.classList.remove('animate-fade-in');
  newContainer.removeAttribute("style");
});

[CassiusHR]

Hi guys, thanks for the help. I've followed these tips and was wondering if it's possible to remove the fadein class once it's finished? For example, fadein class is added, then fadeout is added and requires higher specificity in css to override. Can something like this be done?

fadeIn: function() {
  this.newContainer.classList.add('animate-fade-in');
  this.done();
  this.addEventListener('animationend', function(e) {
    this.newContainer.classList.remove('animate-fade-in');
  }, false);
}

Did you find how to do this? im having the same problem.