Add

components/src/asyncPicker/AsyncPicker.svelte

@@ -191,8 +191,8 @@
             {#each items as item}
                 {#if !isLoading}
                     <div
-                        in:fly={{ x: document.documentElement.clientWidth, duration: 300 }}
-                        out:fly={{ x: document.documentElement.clientWidth, duration: 150 }}
+                        in:fly|global={{ x: document.documentElement.clientWidth, duration: 500 }}
+                        out:fly|global={{ x: document.documentElement.clientWidth, duration: 300 }}
                         class="flex-1 text-center h-8 leading-8 text-sm truncate px-1"
                     >
                         {item[labelKey]}

components/src/mask/Mask.svelte

@@ -92,8 +92,8 @@
 {#if visible}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <div
-        in:fade={{ duration }}
-        out:fade={{ duration: outDuration }}
+        in:fade|global={{ duration }}
+        out:fade|global={{ duration: outDuration }}
         on:click={clickMaskFunc}
         class={`fixed w-screen h-screen inset-0${
             inverse ? bgClassInverse[opacity] || bgClassInverse['0.5'] : bgClass[opacity] || bgClass['0.5']

components/src/popup/Transition.svelte

@@ -54,25 +54,13 @@
         '48': ' py-48',
         '64': ' py-64',
     };
-
-    // let dom = null;
-    // $: {
-    //     if (size === 0 && visible && dom) {
-    //         // 获取dom的高度
-    //         setTimeout(() => {
-    //             transitionParams.y = dom.offsetHeight;
-    //             console.log('transitionParams', transitionParams);
-    //             // console.log('dom', dom, dom.offsetHeight);
-    //         }, 5);
-    //     }
-    // }
 </script>
 
 {#if visible}
     {#if position === 'center'}
         <div
-            out:scale={transitionOutParams}
-            in:scale={transitionParams}
+            out:scale|global={transitionOutParams}
+            in:scale|global={transitionParams}
             class={`${sizeClass[position] || sizeClass['bottom']}${pxClass[px] || pxClass['0']}${
                 pyClass[py] || pyClass['0']
             } pointer-events-auto`}
@@ -82,8 +70,8 @@
         </div>
     {:else}
         <div
-            in:fly={transitionParams}
-            out:fly={transitionOutParams}
+            in:fly|global={transitionParams}
+            out:fly|global={transitionOutParams}
             class={`${sizeClass[position] || sizeClass['bottom']}${pxClass[px] || pxClass['0']}${
                 pyClass[py] || pyClass['0']
             } pointer-events-auto`}

components/src/toast/Transition.svelte

@@ -1,35 +1,34 @@
 <script>
-    import {fade, fly, blur, slide, scale} from 'svelte/transition';
+    import { fade, fly, blur, slide, scale } from 'svelte/transition';
 
-    export let visible = false;//是否显示  is show
-    export let transitionType = 'scale';//过渡动画进入类型，可选值：fade,fly, scale，slide,none  transition type
-    export let transitionParams = {};//过渡动画参数  transition params
-    export let outDuration = 0;//过渡动画退出时间  transition out duration
+    export let visible = false; //是否显示  is show
+    export let transitionType = 'scale'; //过渡动画进入类型，可选值：fade,fly, scale，slide,none  transition type
+    export let transitionParams = {}; //过渡动画参数  transition params
+    export let outDuration = 0; //过渡动画退出时间  transition out duration
 </script>
 
 {#if visible}
     {#if transitionType === 'scale'}
-        <div in:scale={{duration: 300,...transitionParams}} out:scale={{...transitionParams,duration: outDuration}}>
-            <slot></slot>
+        <div in:scale|global={{ duration: 300, ...transitionParams }} out:scale={{ ...transitionParams, duration: outDuration }}>
+            <slot />
         </div>
     {:else if transitionType === 'fly'}
-        <div in:fly={{duration: 300,...transitionParams}} out:fly={{...transitionParams,duration: outDuration}}>
-            <slot></slot>
+        <div in:fly|global={{ duration: 300, ...transitionParams }} out:fly={{ ...transitionParams, duration: outDuration }}>
+            <slot />
         </div>
     {:else if transitionType === 'fade'}
-        <div in:fade={{duration: 300,...transitionParams}} out:fade={{...transitionParams,duration: outDuration}}>
-            <slot></slot>
+        <div in:fade|global={{ duration: 300, ...transitionParams }} out:fade={{ ...transitionParams, duration: outDuration }}>
+            <slot />
         </div>
     {:else if transitionType === 'slide'}
-        <div in:slide={{duration: 300,...transitionParams}} out:slide={{...transitionParams,duration: outDuration}}>
-            <slot></slot>
+        <div in:slide|global={{ duration: 300, ...transitionParams }} out:slide={{ ...transitionParams, duration: outDuration }}>
+            <slot />
         </div>
     {:else if transitionType === 'blur'}
-        <div in:blur={{duration: 300,...transitionParams}} out:blur={{...transitionParams,duration: outDuration}}>
-            <slot></slot>
+        <div in:blur|global={{ duration: 300, ...transitionParams }} out:blur={{ ...transitionParams, duration: outDuration }}>
+            <slot />
         </div>
     {:else}
-        <slot></slot>
+        <slot />
     {/if}
 {/if}
-