Remove ".animated" class after play, and add it back in case element reloads. Plain Javascript

Question

I have a a CSS ".animated" class that is set by default on all the "drawer-wrapper" elements, like so:

<div class="drawer-wrapper animated">
foo
</div>

I made a function that removes this "animated" class as soon as the animation finishes, because the animated state was making problems later on with the z-index. Up to now, my function works.

But the second part of my function doesn't work: I want the "animated" class to be re-added to "drawer-wrapper" in case it is toggled to "display: none" by some other event. That way, when it is re-toggled back to "display: block", the animation can play again, and then be removed again, and so on. Here is my javascript:

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(); });

Thank you most dearly!!

Answer 1

Your second part of code is correct, however, the time you run the code is wrong. Other part of your code is through EventListener. When do you want to add class "animated" back?