interface.js, style.css: make transitions less intensive

src/interface.js

@@ -58,10 +58,20 @@ class InterfaceElement {
 		return this.#hidden;
 	}
 	set hidden(x) {
+		if (this.#hidden === x) return;
+
 		this.#hidden = x;
 
 		for (const node of this.rootNodes) {
-			node.hidden = this.hidden;
+			if (this.hidden) {
+				node.classList.add("visualhidden");
+				node.classList.add("hidden");
+			} else {
+				node.classList.remove("hidden");
+				setTimeout(function() {
+					node.classList.remove("visualhidden");
+				}, 20);
+			}
 		}
 
 		if (this.hidden === true) this.clearAlerts();

src/style.css

@@ -4,11 +4,7 @@ body {
 	padding: 0 10px;
 	color: #444444;
 	background: #eeeeee;
-	animation: fadeIn 0.5s;
+	transition: all 0.5s;
-}
-@keyframes fadeIn {
-	0% {opacity: 0;}
-	100% {opacity: 1;}
 }
 
 body, button {
@@ -160,24 +156,9 @@ button:active {
 	}
 }
 
-[hidden] {
+.visualhidden {
-	animation: fadeOut 0.2s, disappear 0.3s;
 	opacity: 0;
-	visibility: hidden;
-	max-height: 0 !important;
-	margin: 0 !important;
-	padding: 0 !important;
 }
-@keyframes fadeOut {
+.hidden {
-	0% {opacity: 1; visibility: visible;}
+	display: none;
-	100% {opacity: 0; visibility: hidden;}
-}
-@keyframes disappear {
-	0% {
-		max-height: 100em;
-	}
-	100% {
-		max-height: 0;
-		margin: 0;
-	}
 }