Bug 140853 – Animations not showing upon adding/removal of classes

• Component: Animations
• Status: RESOLVED INVALID

Animations fail to "execute" when they are called the SECOND time around by the method of adding and removing classes that reference that animation in a CSS stylesheet(or inline CSS), with JavaScript's classList.add() and classList.remove() methods.

CSS RULES START

@-webkit-keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation: fadeIn .5s ease-in 1 forwards;
  animation: fadeIn .5s ease-in 1 forwards;
}

CSS RULES END

JAVASCRIPT CODE START

element = document.getElementById("anyElement");

var effect = {

    fadeIn: function(el) {

        el.style.opacity = 0;
        el.classList.remove("fadeIn");
        el.classList.add("fadeIn");

    }

};

effects.fadeIn(element);

JAVASCRIPT CODE END

By coding it this way, it works only under Firefox. However, there's a workaround in Webkit browsers, and that is by adding a timeout to the class addition, like so:

    fadeIn: function(el) {

        el.style.opacity = 0;
        el.classList.remove("fadeIn");
        setTimeout(el.classList.add("fadeIn"), 25);

    }

This way, the animation starts as it should, but a timeout shouldn't be required for it to work. I'm thinking, therefore, that it is a bug. (Note that the timeout of 25 is more or less arbitrary, but a number too small won't fix the behaviour)

Sorry, there's a small typo in the code. var effect should be var effects. And also, the 'fadeIn' method should be called more than once for the bug to be noticeable (note that in the code, I only call it once). Please make the pertintent amendments.

(In reply to comment #1)
> Sorry, there's a small typo in the code. var effect should be var effects.
> And also, the 'fadeIn' method should be called more than once for the bug to
> be noticeable (note that in the code, I only call it once). Please make the
> pertintent amendments.

Aaaah, setTimeout(el.classList.add("fadeIn"), 25); should read instead:

setTimeout(function(){ el.classList.add("fadeIn"); }, 25);

As you of course know. Sorry, I'm getting sleepy.

[Antoine Quint]

Created attachment 466305 [details]
Test

It would help to have a test case to run, but I believe I've recreated one that shows what was described by the originator.

[Antoine Quint]

I'm going to close this, removing the "fadeIn" class and adding straight away without waiting for style resolution should indeed NOT trigger a new animation. The test case I wrote behaves the same between Firefox and Safari. If you find this is not correct, please reopen this bug with a test case showing the issue.