From f3e53af1f7e6a78a302a2a5f88ab3e898e92eac6 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 16 Jun 2021 20:33:31 +0800
Subject: fix: Real fix #624.

---
 FrontEnd/src/palette.ts                    |  6 +++++-
 FrontEnd/src/utilities/refreshAnimation.ts | 13 +++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 FrontEnd/src/utilities/refreshAnimation.ts

diff --git a/FrontEnd/src/palette.ts b/FrontEnd/src/palette.ts
index da1e133f..ab3d6b54 100644
--- a/FrontEnd/src/palette.ts
+++ b/FrontEnd/src/palette.ts
@@ -1,6 +1,8 @@
 import Color from "color";
 import { BehaviorSubject, Observable } from "rxjs";
 
+import refreshAnimation from "./utilities/refreshAnimation";
+
 function lightenBy(color: Color, ratio: number): Color {
   const lightness = color.lightness();
   return color.lightness(lightness + (100 - lightness) * ratio);
@@ -83,7 +85,7 @@ export function generatePaletteCSS(palette: Palette): string {
     }
   }
 
-  return `html {${colors
+  return `:root {${colors
     .map(([key, color]) => `${key} : ${color};`)
     .join("")}}`;
 }
@@ -110,6 +112,8 @@ palette$.subscribe((palette) => {
       styleTag.parentElement?.removeChild(styleTag);
     }
   }
+
+  refreshAnimation();
 });
 
 export function setPalette(palette: Palette): () => void {
diff --git a/FrontEnd/src/utilities/refreshAnimation.ts b/FrontEnd/src/utilities/refreshAnimation.ts
new file mode 100644
index 00000000..ba501107
--- /dev/null
+++ b/FrontEnd/src/utilities/refreshAnimation.ts
@@ -0,0 +1,13 @@
+export default function refreshAnimation(): void {
+  document.body.querySelectorAll("*").forEach((e) => {
+    if (e instanceof HTMLElement) {
+      const an = getComputedStyle(e).animationName;
+      if (an !== "none") {
+        e.style.animationName = "none";
+        setTimeout(() => {
+          e.style.animationName = an;
+        });
+      }
+    }
+  });
+}
-- 
cgit v1.2.3