I've encountered an issue with my Javascript code. To add animations to elements on my website, I'm using animate.css, but the animations don't work properly when repeated. Despite trying various solutions like resetting the const where the animation runs, I haven't been able to fix it. Can anyone offer some assistance? I know this should be a simple problem to solve, but for some reason, I just can't seem to pinpoint the issue. Refreshing the site is a temporary fix, but I'd prefer a more permanent solution.
Below is the code snippet used to animate the elements:
const animateCSS = (element, animation, prefix = 'animate__') =>
// Creating and returning a Promise
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// Removing classes and resolving the Promise after animation ends
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
And here is the trigger code for animating the elements:
animateCSS('.wrapper1', 'bounceOutDown'); The trigger is placed on a button which initiates the animation. There's another button that triggers similar animations (Fade in and Fade out), but the issue arises when repeating these actions. You can see a demonstration of this problem at the following link:
If you're interested in reviewing the full code repository, you can find it here on GitHub. Thank you!