feat:新增切换主题页面动画效果

src/services/theme.ts

@@ -1,4 +1,5 @@
 import { changeTheme } from './echarts';
+import {startViewTransition} from "@/services/utils";
 
 export const themes: any = {
   dark: {
@@ -56,41 +57,44 @@ export const themes: any = {
 };
 
 export function switchTheme(themeName?: string) {
-  //编辑器样式
-  let theme = themes[themeName||'dark'];
-  for (let key in theme) {
-    document.documentElement.style.setProperty(key, theme[key]);
-  }
-  
-  //echarts样式（系统组件-图表） 
-  changeTheme(`le-${themeName||'dark'}`);
+  startViewTransition(()=>{
+    //编辑器样式
+    let theme = themes[themeName||'dark'];
+    for (let key in theme) {
+      document.documentElement.style.setProperty(key, theme[key]);
+    }
+
+    //echarts样式（系统组件-图表）
+    changeTheme(`le-${themeName||'dark'}`);
 
-  //系统组件其他图元样式？
-  
-  //画布中的图元？
+    //系统组件其他图元样式？
 
-  //画布样式
-  let options:any = {
-    ruleColor:'#222E47',
-    background: '#1e2430',
-    color: '#bdc7db',
-    ruleOptions:{
-      background:'#121924',
-      textColor:'#6E7B91'
-    },
-  }
-  if(themeName === 'light'){
-    options = {
-      ruleColor:'#C8D0E1',
-      background: '#fff',
-      color: '#000',
+    //画布中的图元？
+
+    //画布样式
+    let options:any = {
+      ruleColor:'#222E47',
+      background: '#1e2430',
+      color: '#bdc7db',
       ruleOptions:{
-        background:'#F7F8FA',
-        textColor:'#C8D0E1'
+        background:'#121924',
+        textColor:'#6E7B91'
       },
     }
-  }
-  // meta2d?.setOptions(options);
-  // meta2d?.render();
-  localStorage.setItem('le-theme', themeName||'dark');
+    if(themeName === 'light'){
+      options = {
+        ruleColor:'#C8D0E1',
+        background: '#fff',
+        color: '#000',
+        ruleOptions:{
+          background:'#F7F8FA',
+          textColor:'#C8D0E1'
+        },
+      }
+    }
+    // meta2d?.setOptions(options);
+    // meta2d?.render();
+    meta2d.setTheme(themeName||'dark');
+    localStorage.setItem('le-theme', themeName||'dark');
+  })
 }

src/services/utils.ts

@@ -80,6 +80,14 @@ export function showNotification(title: string): Promise<boolean> {
     }
   });
 }
+export function startViewTransition(callback) {
+  if (!document.startViewTransition) {
+    callback();
+    return;
+  }
+
+  document.startViewTransition(callback);
+}
 
 export async function dealwithFormatbeforeOpen(data: Meta2dBackData) {
   if (!data) {

src/styles/app.css

@@ -594,3 +594,25 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
 }
+
+html::view-transition-new(root){
+  animation: clip 2s linear;
+  height: 100%;
+  overflow: clip;
+  object-fit: contain;
+}
+html::view-transition-old(root) {
+  animation: none;
+  height: 100%;
+  overflow: clip;
+  object-fit: cover;
+}
+
+@keyframes clip {
+  from{
+    clip-path: circle(0% at 0 0);
+  }
+  to{
+    clip-path: circle(150% at 0 0);
+  }
+}