fix(Theme): update style to prevent flickering (#7505)

* fix(Theme): 修复抖动问题

* feat(Theme): 优化主题切换动画效果

Co-Authored-By: rehee <10417289+rehee@users.noreply.github.com>

Author: ArgoZhang

src/BootstrapBlazor/wwwroot/scss/root.scss

@@ -1,4 +1,4 @@
-@use "variables" as *;
+@use "variables" as *;
 
 :root {
     --bb-primary-color: #{$bb-primary-color};
@@ -82,35 +82,41 @@ a, a:hover, a:focus {
     display: none;
 }
 
-::view-transition-old(*) {
+::view-transition-old(root) {
     mix-blend-mode: normal;
     animation: none;
     z-index: 1;
 }
 
-::view-transition-new(*) {
+::view-transition-new(root) {
+    will-change: clip-path, opacity;
     mix-blend-mode: normal;
-    animation: clip .3s ease-in-out;
+    animation: clip .3s ease-in-out both;
     z-index: 9999;
 }
 
 @keyframes clip {
     from {
         clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
+        opacity: 0.99;
+        transform: translateZ(0);
     }
 
     to {
         clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
+        opacity: 1;
+        transform: translateZ(0);
     }
 }
 
 [data-bs-theme='dark'] {
-    &::view-transition-old(*) {
-        animation: clip2 .3s ease-in-out;
+    &::view-transition-old(root) {
+        will-change: clip-path, opacity;
+        animation: clip2 .3s ease-in-out both;
         z-index: 9999;
     }
 
-    &::view-transition-new(*) {
+    &::view-transition-new(root) {
         animation: none;
         z-index: 1;
     }
@@ -119,10 +125,14 @@ a, a:hover, a:focus {
 @keyframes clip2 {
     from {
         clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
+        opacity: 0.99;
+        transform: translateZ(0);
     }
 
     to {
         clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
+        opacity: 1;
+        transform: translateZ(0);
     }
 }