refactor(ThemeMode): update view-transition style (#5580)

* feat: 增加 calcCenterPosition 工具方法

* refactor: 更新样式

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js

@@ -1,4 +1,4 @@
-import { getTheme, switchTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
+import { getTheme, switchTheme, calcCenterPosition } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export function init(id) {
@@ -12,7 +12,9 @@ export function init(id) {
             else {
                 theme = 'dark';
             }
-            switchTheme(theme, window.innerWidth, window.innerHeight);
+
+            const rect = calcCenterPosition(el);
+            switchTheme(theme, rect.x, rect.y);
         });
     }
 }

src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js

@@ -1,4 +1,4 @@
-import { getPreferredTheme, setTheme, switchTheme } from "../../modules/utility.js"
+import { getPreferredTheme, setTheme, switchTheme, calcCenterPosition } from "../../modules/utility.js"
 import EventHandler from "../../modules/event-handler.js"
 import Data from "../../modules/data.js"
 
@@ -25,7 +25,9 @@ export function init(id, invoke, themeValue, callback) {
     EventHandler.on(el, 'click', '.dropdown-item', e => {
         const activeTheme = e.delegateTarget.getAttribute('data-bb-theme-value');
         theme.currentTheme = activeTheme;
-        switchTheme(activeTheme, window.innerWidth, 0);
+
+        const rect = calcCenterPosition(el);
+        switchTheme(activeTheme, rect.x, rect.y);
         if (callback) {
             invoke.invokeMethodAsync(callback, activeTheme);
         }

src/BootstrapBlazor/wwwroot/modules/utility.js

@@ -841,6 +841,14 @@ export function setTitle(title) {
     document.title = title;
 }
 
+export function calcCenterPosition(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+        x: rect.left + el.offsetWidth / 2,
+        y: rect.top + el.offsetHeight / 2
+    }
+}
+
 export {
     autoAdd,
     autoRemove,

src/BootstrapBlazor/wwwroot/scss/root.scss

@@ -76,13 +76,48 @@ a, a:hover, a:focus {
     --bs-popover-body-padding-y: 0.5rem;
 }
 
-::view-transition-old(root) {
+::view-transition-old(*) {
+    mix-blend-mode: normal;
     animation: none;
+    z-index: 1;
 }
 
-::view-transition-new(root) {
+::view-transition-new(*) {
     mix-blend-mode: normal;
-    animation: clip .3s ease-in;
+    animation: clip .3s ease-in-out;
+    z-index: 9999;
+}
+
+@keyframes clip {
+    from {
+        clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
+    }
+
+    to {
+        clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
+    }
+}
+
+[data-bs-theme='dark'] {
+    &::view-transition-old(*) {
+        animation: clip2 .3s ease-in-out;
+        z-index: 9999;
+    }
+
+    &::view-transition-new(*) {
+        animation: none;
+        z-index: 1;
+    }
+}
+
+@keyframes clip2 {
+    from {
+        clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
+    }
+
+    to {
+        clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
+    }
 }
 
 body:before {
@@ -125,13 +160,3 @@ body:before {
         content: "extraExtraLarge";
     }
 }
-
-@keyframes clip {
-    from {
-        clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
-    }
-
-    to {
-        clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
-    }
-}