From 72bcc01073c41a5eee7dc1cbb3c9a35e9196a297 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Mon, 24 Jun 2024 23:50:34 +0200
Subject: [PATCH] Add custom theme animation instead of transition view

---
 app/components/AppHeader.vue | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 84c94b4..36099e8 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -31,13 +31,14 @@ const navs = [
 ]
 
 function toggleTheme() {
-  if (!document.startViewTransition) {
+  document.body.style.animation = 'theme-switch-on .5s'
+  setTimeout(() => {
     isDark.value = !isDark.value
-    return
-  }
-
-  document.startViewTransition(() => {
-  })
+    document.body.style.animation = 'theme-switch-off .5s'
+    setTimeout(() => {
+      document.body.style.animation = ''
+    }, 500)
+  }, 500)
 }
 </script>
 
@@ -84,4 +85,26 @@ function toggleTheme() {
 .handwriting {
   font-family: 'Dancing Script', cursive;
 }
+
+@keyframes theme-switch-on {
+  0% {
+    filter: blur(0);
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.98);
+    filter: blur(3px);
+  }
+}
+
+@keyframes theme-switch-off {
+  0% {
+    transform: scale(0.98);
+    filter: blur(3px);
+  }
+  100% {
+    filter: blur(0);
+    transform: scale(1);
+  }
+}
 </style>