优化viewTransition函数

Yin-Jinlong · Apr 22, 2024 · 1220b7f · 1220b7f
1 parent a24b8a5
commit 1220b7f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/packages/global.d.ts b/packages/global.d.ts
@@ -13,7 +13,7 @@ declare module '@vue/runtime-core' {
 
 declare global {
     interface Document {
-        startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition
+        readonly startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition
     }
 
     interface ViewTransition {

diff --git a/packages/utils/view-transition.ts b/packages/utils/view-transition.ts
@@ -1,5 +1,13 @@
 type ViewTransitionCallback = () => void | Promise<void>
 
+type TransitionFn = (
+    init: ViewTransitionCallback,
+    before?: ViewTransitionCallback | null,
+    anim?: ViewTransitionCallback | null,
+    end?: ViewTransitionCallback | null,
+    finallyFn?: ViewTransitionCallback | null,
+) => Promise<void>
+
 /**
  *
  * 视图转场
@@ -12,25 +20,19 @@ type ViewTransitionCallback = () => void | Promise<void>
  *
  * @author YJL
  */
-export async function viewTransition(
-    init: ViewTransitionCallback,
-    before?: ViewTransitionCallback | null,
-    anim?: ViewTransitionCallback | null,
-    end?: ViewTransitionCallback | null,
-    finallyFn?: ViewTransitionCallback | null,
-): Promise<void> {
-    if (document.startViewTransition) {
+export const viewTransition: TransitionFn = (() => {
+    return document.startViewTransition ? async (init, before, anim, end, finallyFn) => {
         try {
             await before?.()
-            const t = document.startViewTransition(init)
+            const t = document.startViewTransition!(init)
             await t.ready
             await anim?.()
             await t.finished
             await end?.()
         } finally {
             await finallyFn?.()
         }
-    } else {
-        await init()
+    } : async (init) => {
+        return await init()
     }
-}
+})()