[Webkit-unassigned] [Bug 140853] New: Animations not showing upon adding/removal of classes

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=140853

            Bug ID: 140853
           Summary: Animations not showing upon adding/removal of classes
    Classification: Unclassified
           Product: WebKit
           Version: 528+ (Nightly build)
          Hardware: PC
                OS: Linux
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: lentiformnucleus at gmail.com
                CC: dino at apple.com

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)

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20150124/01cce231/attachment-0002.html>