Merge pull request #226 from abstain23/feat/theme-transtion

feat(projects): 增加主题切换过渡效果

.vscode/settings.json

@@ -70,5 +70,6 @@
   },
   "[vue]": {
     "editor.defaultFormatter": "Vue.volar"
-  }
+  },
+  "i18n-ally.localesPaths": ["src/locales", "src/locales/lang"]
 }

src/components/common/dark-mode-switch.vue

@@ -34,9 +34,51 @@ const darkMode = computed({
   }
 });
 
-function handleSwitch() {
-  darkMode.value = !darkMode.value;
+function handleSwitch(event: MouseEvent) {
+  const x = event.clientX;
+  const y = event.clientY;
+  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+  // @ts-expect-error: Transition API
+  if (!document.startViewTransition) {
+    darkMode.value = !darkMode.value;
+    return;
+  }
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(() => {
+    darkMode.value = !darkMode.value;
+  });
+  transition.ready.then(() => {
+    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
+    document.documentElement.animate(
+      {
+        clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
+      },
+      {
+        duration: 300,
+        easing: 'ease-in',
+        pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
+      }
+    );
+  });
 }
 </script>
 
-<style scoped></style>
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 9999;
+}
+::view-transition-new(root) {
+  z-index: 1;
+}
+.dark::view-transition-old(root) {
+  z-index: 1;
+}
+.dark::view-transition-new(root) {
+  z-index: 9999;
+}
+</style>