Amélioration de la transition de thème avec une animation de clipPath et ajustement des éléments pseudo pour le mode sombre

app/components/AppHeader.vue

@@ -21,23 +21,28 @@ function startViewTransition(event: MouseEvent | { clientX: number, clientY: num
     Math.max(y, window.innerHeight - y),
   )
 
-  const transition = document.startViewTransition(() => {
+  const transition = document.startViewTransition(async () => {
     switchTheme()
+    await nextTick()
   })
 
   transition.ready.then(() => {
-    const duration = 500
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
     document.documentElement.animate(
       {
-        clipPath: [
+        clipPath: colorMode.value === 'dark'
-          `circle(0px at ${x}px ${y}px)`,
+          ? [...clipPath].reverse()
-          `circle(${endRadius}px at ${x}px ${y}px)`,
+          : clipPath,
-        ],
       },
       {
-        duration,
+        duration: 500,
-        easing: 'cubic-bezier(.76,.32,.29,.66)',
+        easing: 'ease-out',
-        pseudoElement: '::view-transition-new(root)',
+        pseudoElement: colorMode.value === 'dark'
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
       },
     )
   })