Add animation class

CGWebDev2003 · CGWebDev2003 · commit 0343e2275dc3 · 2023-06-17T09:38:56.000+02:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/neptune-animations.css b/neptune-animations.css
@@ -0,0 +1,17 @@
+.neptune-spin {
+	animation: spin 1s 0s infinite;
+	ani
+}
+
+@keyframes spin {
+	100% { transform: rotate(360deg);}
+}
+
+
+
+.test {
+	margin: 15rem;
+	width: 4rem;
+	height: 4rem;
+	background-color: aqua;
+}
diff --git a/neptune-animations.js b/neptune-animations.js
@@ -0,0 +1,40 @@
+export default class NeptuneAnimate {
+	constructor(element, animationClass) {
+	  this.element = element;
+	  this.animationClass = animationClass;
+	  this.animationEndEvent = this.getAnimationEndEvent();
+
+	  this.element.addEventListener(this.animationEndEvent, this.handleAnimationEnd.bind(this));
+	}
+
+	getAnimationEndEvent() {
+	  const el = document.createElement("div");
+	  const animations = {
+		animation: "animationend",
+		OAnimation: "oAnimationEnd",
+		MozAnimation: "animationend",
+		WebkitAnimation: "webkitAnimationEnd"
+	  };
+
+	  for (const key in animations) {
+		if (el.style[key] !== undefined) {
+		  return animations[key];
+		}
+	  }
+
+	  return "animationend";
+	}
+
+	handleAnimationEnd() {
+	  this.element.classList.remove(this.animationClass);
+	  this.element.removeEventListener(this.animationEndEvent, this.handleAnimationEnd);
+	}
+
+	startAnimation() {
+	  this.element.classList.add(this.animationClass);
+	}
+
+	stopAnimation() {
+		this.element.classList.remove(this.animationClass);
+	}
+  }
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../neptune-animations.css">
+
+	<title>Document</title>
+</head>
+<body>
+	<div class="test" id="test"></div>
+
+	<script type="module">
+		import NeptuneAnimate from "../neptune-animations.js"
+
+		const myElement = document.getElementById("test");
+		const neptuneAnimate = new NeptuneAnimate(myElement, "neptune-spin");
+
+		neptuneAnimate.startAnimation();
+
+		setTimeout(function () {
+			neptuneAnimate.stopAnimation();
+		}, 5000);
+	</script>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "liveServer.settings.port": 5501`
	`3`	`+}`