Add 80/20 rule for css animations.

bennadel · Mar 22, 2024 · f8028c0 · f8028c0
1 parent f418e9b
commit f8028c0
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [CSS Enter Animations Follow The 80/20 Rule](https://bennadel.github.io/JavaScript-Demos/demos/enter-animations-80-20)
 * [Reading Element Attributes In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/attribute-parts)
 * [Using The AngularJS Parser To Comply With CSP In Alpine.js 3.13.5](https://bennadel.github.io/JavaScript-Demos/demos/angularjs-parser-in-alpinejs)
 * [JSON Explorer In Alpine.js 3.13.5](https://bennadel.github.io/JavaScript-Demos/demos/json-explorer-alpine3)

diff --git a/demos/enter-animations-80-20/index.htm b/demos/enter-animations-80-20/index.htm
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<script type="text/javascript" src="../../vendor/alpine/3.13.5/alpine.3.13.5.js" defer></script>
+	<link rel="stylesheet" type="text/css" href="./main.css" />
+</head>
+<body x-data="{
+		isShowingAside: false,
+		isShowingModal: false
+	}">
+
+	<h1>
+		CSS Enter Animations Follow The 80/20 Rule
+	</h1>
+
+	<!-- ASIDE Example: ------------------------------------------------------------- -->
+	<!-- Button will slide-up from bottom of screen. -->
+
+	<template x-if="( ! isShowingAside )">
+
+		<button @click="( isShowingAside = true )" class="show">
+			Show Aside
+		</button>
+
+	</template>
+	<template x-if="isShowingAside">
+
+		<aside>
+			<h2>
+				This is the aside!
+			</h2>
+			<button @click="( isShowingAside = false )">
+				Hide
+			</button>
+		</aside>
+
+	</template>
+
+	<!-- MODAL Example: ------------------------------------------------------------- -->
+	<!-- Modal will fade / scale into view. -->
+
+	<p>
+		<button @click="( isShowingModal = true )">
+			Show Modal
+		</button>
+	</p>
+
+	<template x-if="isShowingModal">
+
+		<div class="modal">
+			<h2>
+				This is the modal!
+			</h2>
+			<button @click="( isShowingModal = false )">
+				Hide
+			</button>
+		</div>
+
+	</template>
+
+</body>
+</html>
diff --git a/demos/enter-animations-80-20/main.css b/demos/enter-animations-80-20/main.css
@@ -0,0 +1,73 @@
+body,
+button {
+	font-family: monospace ;
+}
+
+/* ----------------------------------------------------------------------------------- */
+/* ----------------------------------------------------------------------------------- */
+
+.show {
+	/* Button slides-up from bottom of screen. */
+	animation-duration: 300ms ;
+	animation-fill-mode: both ;
+	animation-iteration-count: 1 ;
+	animation-name: enter-show-button ;
+	animation-timing-function: ease-out ;
+
+	position: fixed ;
+	right: 20px ;
+	bottom: 20px ;
+}
+
+@keyframes enter-show-button {
+	from {
+		transform: translate3d( 0px, 100px, 0px ) ;
+	}
+	to {
+		transform: translate3d( 0px, 0px, 0px ) ;
+	}
+}
+
+aside {
+	background-color: #fafafa ;
+	box-shadow: -1px 0px 0px #cccccc ;
+	bottom: 0px ;
+	padding: 15px 30px ;
+	position: fixed ;
+	right: 0px ;
+	top: 0px ;
+	width: 300px ;
+	z-index: 2 ;
+}
+
+/* ----------------------------------------------------------------------------------- */
+/* ----------------------------------------------------------------------------------- */
+
+.modal {
+	/* Modal window fades and scales into view. */
+	animation-duration: 300ms ;
+	animation-fill-mode: both ;
+	animation-iteration-count: 1 ;
+	animation-name: enter-modal-window ;
+	animation-timing-function: ease-out ;
+
+	background-color: #fafafa ;
+	bottom: 0px ;
+	left: 0px ;
+	padding: 15px 30px ;
+	position: fixed ;
+	right: 0px ;
+	top: 0px ;
+	z-index: 2 ;
+}
+
+@keyframes enter-modal-window {
+	from {
+		opacity: 0.5 ;
+		transform: scale( 0.9 ) ;
+	}
+	to {
+		opacity: 1.0 ;
+		transform: scale( 1 ) ;
+	}
+}