JS – How to remove class of animation after animation ends?

  animation, class, javascript, remove

Trying to follow wesbos’s drum kit tutorial with Javascript, but instead of using transition to animate my keyboards, I used keyframe animations. Now I’m stuck on Day 1.

    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`.keys__key[data-key="${e.keyCode}"]`);
    if (!audio) return;
    key.classList.add('playing');
    audio.currentTime = 0;
    audio.play();
    key.addEventListener('animationEnd', animationEndCallback);
}
function animationEndCallback(e) {
    this.classList.remove('playing');
    console.log();
}


window.addEventListener('keydown', playSound);
window.addEventListener('animationend', animationEndCallback);



//animation
@keyframes playing{
    from{
        background-color: rgba(216, 83, 103, .5);
        transform: scale(100%);
    }
    80%{
        background-color: rgba(216, 83, 103, 1);
        transform: scale(120%);
    }
    to {
        background-color: rgba(216, 83, 103, .5);
        transform: scale(100%);
    }
}

.playing{
    animation: playing 300ms cubic-bezier(.31,.2,.25,1.52) forwards;
}

Just so you know, I have tried changing the "this" class to "key" but I’m somehow restricted and it returns to null. I DUNNO

Source: Ask Javascript Questions

LEAVE A COMMENT