Within my CSS, there is a ".animated" class that is automatically applied to all elements with the "drawer-wrapper" class. The HTML structure looks like this:
<div class="drawer-wrapper animated">
foo
</div>
I created a function that successfully removes the "animated" class after the animation completes because it was causing issues with z-index later on. So far, so good.
However, the second part of my function is not working as intended: I want the "animated" class to be re-added to "drawer-wrapper" if it is toggled to "display: none" by another event. This way, when it is toggled back to "display: block", the animation can play again, and then be removed once more. Below is the javascript code I am using:
function remove_and_add_animation() {
var i;
var a = document.querySelectorAll(".drawer-wrapper");
for (i = 0; i < a.length; i++) {
a[i].addEventListener("webkitAnimationEnd", function(){
this.classList.remove("animated")});
a[i].addEventListener("animationend", function(){
this.classList.remove("animated")});
if (
window.getComputedStyle(a[i]).display === "none"
) {
a[i].classList.add("animated")
}
}
}
addEventListener("change", function() {remove_and_add_animation(); });
Any help or guidance on resolving this issue would be greatly appreciated!