AnimateCSS

CHANGELOG.md

@@ -47,6 +47,9 @@ Special thanks to @khassel, @rejas and @sdetweil for taking over most (if not al
 - updatenotification: Added `sendUpdatesNotifications` feature. Broadcast update with `UPDATES` notification to other modules
 - updatenotification: allow force scanning with `SCAN_UPDATES` notification from other modules
 - Added per-calendar fetchInterval
+- Added optional AnimateCSS animate for `hide()`, `show()`, `updateDom()`
+- Added AnimateIn and animateOut in module config definition
+- Apply AnimateIn rules on the first start
 
 ### Removed
 

index.html

@@ -13,6 +13,7 @@
     <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
     <link rel="stylesheet" type="text/css" href="css/main.css" />
     <link rel="stylesheet" type="text/css" href="fonts/roboto.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/node_modules/animate.css/animate.min.css" />
     <!-- custom.css is loaded by the loader.js to make sure it's loaded after the module css files. -->
 
     <script type="text/javascript">
@@ -52,6 +53,7 @@
     <script type="text/javascript" src="js/module.js"></script>
     <script type="text/javascript" src="js/loader.js"></script>
     <script type="text/javascript" src="js/socketclient.js"></script>
+    <script type="text/javascript" src="js/animateCSS.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
   </body>
 </html>

js/animateCSS.js

@@ -0,0 +1,165 @@
+/* MagicMirror²
+ * AnimateCSS System from https://animate.style/
+ * by @bugsounet
+ * for Michael Teeuw https://michaelteeuw.nl
+ * MIT Licensed.
+ */
+
+/* enumeration of animations in Array **/
+const _AnimateCSSIn = [
+	// Attention seekers
+	"bounce",
+	"flash",
+	"pulse",
+	"rubberBand",
+	"shakeX",
+	"shakeY",
+	"headShake",
+	"swing",
+	"tada",
+	"wobble",
+	"jello",
+	"heartBeat",
+	// Back entrances
+	"backInDown",
+	"backInLeft",
+	"backInRight",
+	"backInUp",
+	// Bouncing entrances
+	"bounceIn",
+	"bounceInDown",
+	"bounceInLeft",
+	"bounceInRight",
+	"bounceInUp",
+	// Fading entrances
+	"fadeIn",
+	"fadeInDown",
+	"fadeInDownBig",
+	"fadeInLeft",
+	"fadeInLeftBig",
+	"fadeInRight",
+	"fadeInRightBig",
+	"fadeInUp",
+	"fadeInUpBig",
+	"fadeInTopLeft",
+	"fadeInTopRight",
+	"fadeInBottomLeft",
+	"fadeInBottomRight",
+	// Flippers
+	"flip",
+	"flipInX",
+	"flipInY",
+	// Lightspeed
+	"lightSpeedInRight",
+	"lightSpeedInLeft",
+	// Rotating entrances
+	"rotateIn",
+	"rotateInDownLeft",
+	"rotateInDownRight",
+	"rotateInUpLeft",
+	"rotateInUpRight",
+	// Specials
+	"jackInTheBox",
+	"rollIn",
+	// Zooming entrances
+	"zoomIn",
+	"zoomInDown",
+	"zoomInLeft",
+	"zoomInRight",
+	"zoomInUp",
+	// Sliding entrances
+	"slideInDown",
+	"slideInLeft",
+	"slideInRight",
+	"slideInUp"
+];
+
+const _AnimateCSSOut = [
+	// Back exits
+	"backOutDown",
+	"backOutLeft",
+	"backOutRight",
+	"backOutUp",
+	// Bouncing exits
+	"bounceOut",
+	"bounceOutDown",
+	"bounceOutLeft",
+	"bounceOutRight",
+	"bounceOutUp",
+	// Fading exits
+	"fadeOut",
+	"fadeOutDown",
+	"fadeOutDownBig",
+	"fadeOutLeft",
+	"fadeOutLeftBig",
+	"fadeOutRight",
+	"fadeOutRightBig",
+	"fadeOutUp",
+	"fadeOutUpBig",
+	"fadeOutTopLeft",
+	"fadeOutTopRight",
+	"fadeOutBottomRight",
+	"fadeOutBottomLeft",
+	// Flippers
+	"flipOutX",
+	"flipOutY",
+	// Lightspeed
+	"lightSpeedOutRight",
+	"lightSpeedOutLeft",
+	// Rotating exits
+	"rotateOut",
+	"rotateOutDownLeft",
+	"rotateOutDownRight",
+	"rotateOutUpLeft",
+	"rotateOutUpRight",
+	// Specials
+	"hinge",
+	"rollOut",
+	// Zooming exits
+	"zoomOut",
+	"zoomOutDown",
+	"zoomOutLeft",
+	"zoomOutRight",
+	"zoomOutUp",
+	// Sliding exits
+	"slideOutDown",
+	"slideOutLeft",
+	"slideOutRight",
+	"slideOutUp"
+];
+
+/**
+ * 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 });
+	});
+}

js/loader.js

@@ -88,6 +88,8 @@ const Loader = (function () {
 				path: `${moduleFolder}/`,
 				file: `${moduleName}.js`,
 				position: moduleData.position,
+				animateIn: moduleData.animateIn,
+				animateOut: moduleData.animateOut,
 				hiddenOnStartup: moduleData.hiddenOnStartup,
 				header: moduleData.header,
 				configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false,