140853 2015-01-24 00:31:32 -0800 Animations not showing upon adding/removal of classes 2023-05-10 01:14:05 -0700 1 1 1 Unclassified WebKit Animations 528+ (Nightly build) PC Linux RESOLVED INVALID P2 Normal --- 1 lentiformnucleus webkit-unassigned dino graouts oldest_to_newest 1063896 0 lentiformnucleus 2015-01-24 00:31:32 -0800 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) 1063897 1 lentiformnucleus 2015-01-24 00:36:51 -0800 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. 1063898 2 lentiformnucleus 2015-01-24 00:42:32 -0800 (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. 1954272 3 466305 graouts 2023-05-10 01:12:58 -0700 Created attachment 466305 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. 1954273 4 graouts 2023-05-10 01:14:05 -0700 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. 466305 2023-05-10 01:12:58 -0700 2023-05-10 01:12:58 -0700 Test bug-140853.html text/html 759 graouts PHN0eWxlPgogICAgQC13ZWJraXQta2V5ZnJhbWVzIGZhZGVJbiB7CiAgICAgIHRvIHsKICAgICAg ICBvcGFjaXR5OiAxOwogICAgICB9CiAgICB9CiAgICBAa2V5ZnJhbWVzIGZhZGVJbiB7CiAgICAg IHRvIHsKICAgICAgICBvcGFjaXR5OiAxOwogICAgICB9CiAgICB9CgogICAgLmZhZGVJbiB7CiAg ICAgIC13ZWJraXQtYW5pbWF0aW9uOiBmYWRlSW4gLjVzIGVhc2UtaW4gMSBmb3J3YXJkczsKICAg ICAgYW5pbWF0aW9uOiBmYWRlSW4gLjVzIGVhc2UtaW4gMSBmb3J3YXJkczsKICAgIH0gICAKCiAg ICBkaXYgewogICAgICAgIHdpZHRoOiAxMDBweDsKICAgICAgICBoZWlnaHQ6IDEwMHB4OwogICAg ICAgIGJhY2tncm91bmQtY29sb3I6IGJsYWNrOwogICAgICAgIG9wYWNpdHk6IDA7CiAgICB9Cjwv c3R5bGU+Cgo8ZGl2PjwvZGl2PgoKPHNjcmlwdD4KICAgIGVsZW1lbnQgPSBkb2N1bWVudC5xdWVy eVNlbGVjdG9yKCJkaXYiKTsKCiAgICB2YXIgZWZmZWN0ID0gewoKICAgICAgICBmYWRlSW46IGZ1 bmN0aW9uKGVsKSB7CgogICAgICAgICAgICBlbC5zdHlsZS5vcGFjaXR5ID0gMDsKICAgICAgICAg ICAgZWwuY2xhc3NMaXN0LnJlbW92ZSgiZmFkZUluIik7CiAgICAgICAgICAgIGVsLmNsYXNzTGlz dC5hZGQoImZhZGVJbiIpOwoKICAgICAgICB9CgogICAgfTsKCiAgICBlZmZlY3QuZmFkZUluKGVs ZW1lbnQpOwoKICAgIHNldFRpbWVvdXQoKCkgPT4geyBlZmZlY3QuZmFkZUluKGVsZW1lbnQpIH0s IDIwMDApOwo8L3NjcmlwdD4K