If an animation is triggered while the element’s opacity is set to 0, it fades in, but briefly flickers after completion. This occurs even when the opacity is set to 1 directly afterwards.
Here is a jsfiddle that illustrates the problem.
Just for context: I use this function to add animations classes (found on the animate.css website):
const animateCSS = (element, animation, prefix = 'animate__') =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
- First I thought the flickering is caused by any animation delay.
test1.style.setProperty('--animate-delay', '0s');
- Since it returns a promise, I thought it should be enough to set the
opacityin a.then()statement.
let test1 = document.getElementById("test1");
animateCSS("#test1", "flipInX") // flickers
.then(()=>{
test1.style.opacity = 1;
});
...
animateCSS("#test1", "flipOutX")
.then(()=>{
test1.style.opacity = 0;
});
- Setting the value immediately doesn’t work either.
let test1 = document.getElementById("test1");
animateCSS("#test1", "flipInX")
test1.style.opacity = 1;
...
animateCSS("#test1", "flipOutX") // flickers
test1.style.opacity = 0;
What is the correct way to achieve this effect?
I use animate.css 4.1.1.
