While experimenting with animate.css, I created a custom Javascript function to initiate animation events.
This simple function, triggered by an onClick event on a button, is only three (or four) lines long, but encounters a perplexing error.
The anim function removes the class from the element and then adds it back in, allowing for multiple button presses to trigger the animation. However, I encountered a problem where the animation would only run once and fail to repeat upon subsequent clicks.
In a surprising turn of events, I found that adding console.log(element_name) in line 3 magically made it work.
I was baffled by this behavior and attempted to add other console.log statements, but strangely only console.log(element_name) had any effect!
To confirm that this wasn't just a glitch in my development environment, I replicated the issue on JSFiddle here.
function anim(element_name){ //'animate' is a reserved keyword
removeClass(element_name, 'bounceInDown');
console.log(element_name); //Very cute behaviour!!! when I put this line here, it works, if i don't it doesnt.
//console.log('a'); //Not all console.logs work
addClass(element_name, 'bounceInDown');
}
function addClass(element, classname){
element.classList.add(classname);
}
function removeClass(element, classname){
element.classList.remove(classname);
}