html - Extremely weird behaviour with javascript addClass and removeClass -


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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -