kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-08-21 12:55:22 +00:00
Code Issues Projects Releases Wiki Activity

Fix: AnimateCSS merge hide() and show() animated css class when we do multiple call (#3200)

Browse Source 
PR: #3113  

I see this bugs:

AnimateCSS merge hide() and show() animated css class when we do
multiple call
--> result it will stay en hide state

I think event listener (is animateCSS file) is not a proper solution

I correct it with like traditional code with timer

Fix too: AnimateIn on first start
This commit is contained in:
Bugsounet - Cédric
2023-09-19 20:14:35 +02:00
committed by GitHub
parent af0fe37f70
commit 4eccce3f77
4 changed files with 81 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
js/animateCSS.js
View File

@@ -130,36 +130,35 @@ const AnimateCSSOut = [
/**
* Create an animation with Animate CSS
* resolved as Promise when done
* @param {string} [element] div element to animate.
* @param {string} [animation] animation name.
* @param {number} [animationTime] animation duration.
*/
function AnimateCSS(element, animation, animationTime) {
/* We create a Promise and return it */
return new Promise((resolve) => {
const animationName = `animate__${animation}`;
const node = document.getElementById(element);
if (!node) {
// don't execute animate and resolve
Log.warn(`AnimateCSS: node not found for`, element);
resolve();
return;
}
node.style.setProperty("--animate-duration", `${animationTime}s`);
node.classList.add("animate__animated", animationName);
/**
* When the animation ends, we clean the classes and resolve the Promise
* @param {object} event object
*/
function handleAnimationEnd(event) {
node.classList.remove("animate__animated", animationName);
node.style.removeProperty("--animate-duration", `${animationTime}s`);
event.stopPropagation();
resolve();
}
node.addEventListener("animationend", handleAnimationEnd, { once: true });
});
function addAnimateCSS(element, animation, animationTime) {
const animationName = `animate__${animation}`;
const node = document.getElementById(element);
if (!node) {
// don't execute animate: we don't find div
Log.warn(`addAnimateCSS: node not found for`, element);
return;
}
node.style.setProperty("--animate-duration", `${animationTime}s`);
node.classList.add("animate__animated", animationName);
}
/**
* Remove an animation with Animate CSS
* @param {string} [element] div element to animate.
* @param {string} [animation] animation name.
*/
function removeAnimateCSS(element, animation) {
const animationName = `animate__${animation}`;
const node = document.getElementById(element);
if (!node) {
// don't execute animate: we don't find div
Log.warn(`removeAnimateCSS: node not found for`, element);
return;
}
node.classList.remove("animate__animated", animationName);
node.style.removeProperty("--animate-duration");
}