html - Extremely weird behaviour with javascript addClass and removeClass -
this question has answer here:
i playing animate.css , built own javascript function trigger animation events.
this simple function (triggered through onclick event on button) 3 (four) lines long, runs mind-boggling error.
the anim
function first removes class element, adds it, multiple presses on button keep running animation. unfortunately, found didn't work! is, animation runs once (the first time only), , fails run subsequently.
in stroke of serendipity, discovered adding line console.log(element_name)
in line 3
made work.
i puzzled behaviour, , experimented adding other console.log
lines strangely line console.log(element_name)
works!
to ensure wasn't quirk in development environment, reproduced in jsfiddle here.
function anim(element_name){ //'animate' reserved keyword removeclass(element_name, 'bounceindown'); console.log(element_name); //very cute behaviour!!! when put line here, works, if don't doesnt. //console.log('a'); //not console.logs work addclass(element_name, 'bounceindown'); } function addclass(element, classname){ element.classlist.add(classname); } function removeclass(element, classname){ element.classlist.remove(classname); }
that because javascript compilers try several actions @ time, class never gets deleted! solution make reflow of page , can example this:
document.body.clientheight;
change log , problem solved!
Comments
Post a Comment