svelte/transition 模块导出了七个函数：fade、blur、fly、slide、scale、draw 和 crossfade。它们用于 Svelte 的 transitions。

fade

  1. function fade(
  2.     node: Element,
  3.     { delay, duration, easing }?: FadeParams | undefined
  4. ): TransitionConfig;
  1. transition:fade={params}
  1. in:fade={params}
  1. out:fade={params}

对元素的透明度从 0 到当前透明度进行 in 过渡动画，以及从当前透明度到 0 进行 out 过渡动画。

fade 接受以下参数：

  • delay（number，默认为 0）— 开始之前的毫秒数
  • duration（number，默认为 400）— 过渡持续的毫秒数
  • easing（function，默认为 linear）— 一个 easing 函数

你可以在 过渡教程 中看到 fade 过渡的效果。

  1. <script>
  2.     import { fade } from 'svelte/transition';
  3. </script>
  5. {#if condition}
  6.     <div transition:fade={{ delay: 250, duration: 300 }}>淡入淡出</div>
  7. {/if}

blur

  1. function blur(
  3.   node: Element,
  5.   {
  7.   delay,
  9.   duration,
  11.   easing,
  13.   amount,
  15.   opacity
  17.   }?: BlurParams | undefined
  19. ): TransitionConfig;
  1. transition:blur={params}
  1. in:blur={params}
  1. out:blur={params}

随着元素透明度的变化，同时对 blur 滤镜进行动画处理。

blur 接受以下参数：

  • delay（number，默认为 0）— 开始之前的毫秒数
  • duration（number，默认为 400）— 过渡持续的毫秒数
  • easing（function，默认为 cubicInOut）— 一个 easing 函数
  • opacity（number，默认为 0）— 淡出淡入的透明度值
  • amount（number | string，默认为 5）— 模糊大小。支持 CSS 单位（例如："4rem"）。默认单位是 px
  1. <script>
  2.     import { blur } from 'svelte/transition';
  3. </script>
  5. {#if condition}
  6.     <div transition:blur={{ amount: 10 }}>淡入淡出</div>
  7. {/if}

fly

  1. function fly(
  3.   node: Element,
  5.   {
  7.   delay,
  9.   duration,
  11.   easing,
  13.   x,
  15.   y,
  17.   opacity
  19.   }?: FlyParams | undefined
  21. ): TransitionConfig;
  1. transition:fly={params}
  1. in:fly={params}
  1. out:fly={params}

对元素的 x 和 y 位置以及透明度进行动画处理。in 过渡从提供的值（作为参数传递给元素的默认值）开始动画。out 过渡从元素的默认值动画到提供的值。

fly 接受以下参数：

  • delay（number，默认为 0）— 开始之前的毫秒数
  • duration（number，默认为 400）— 过渡持续的毫秒数
  • easing（function，默认为 cubicOut）— 一个 easing 函数
  • x（number | string，默认为 0）— x 偏移量，淡出淡入的起始值
  • y（number | string，默认为 0）— y 偏移量，淡出淡入的起始值
  • opacity（number，默认为 0）— 淡出淡入的透明度值

x 和 y 默认使用 px，但支持 CSS 单位，例如 x: '100vw' 或 y: '50%'。你可以在 过渡教程 中看到 fly 过渡的效果。

  1. <script>
  2.     import { fly } from 'svelte/transition';
  3.     import { quintOut } from 'svelte/easing';
  4. </script>
  6. {#if condition}
  7.     <div
  8.         transition:fly={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}
  9.     >
  10.         飞入飞出
  11.     </div>
  12. {/if}

slide

  1. function slide(
  3.   node: Element,
  5.   {
  7.   delay,
  9.   duration,
  11.   easing,
  13.   axis
  15.   }?: SlideParams | undefined
  17. ): TransitionConfig;
  1. transition:slide={params}
  1. in:slide={params}
  1. out:slide={params}

滑动元素进入和退出。

slide 接受以下参数：

  • delay（number，默认为 0）— 开始之前的毫秒数
  • duration（number，默认为 400）— 过渡持续的毫秒数
  • easing（function，默认为 cubicOut）— 一个 easing 函数
  • axis（x | y，默认为 y）— 过渡发生的运动轴
  1. <script>
  2.     import { slide } from 'svelte/transition';
  3.     import { quintOut } from 'svelte/easing';
  4. </script>
  6. {#if condition}
  7.     <div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>
  8.         水平滑动进入和退出
  9.     </div>
  10. {/if}

scale

  1. function scale(
  3.   node: Element,
  5.   {
  7.   delay,
  9.   duration,
  11.   easing,
  13.   start,
  15.   opacity
  17.   }?: ScaleParams | undefined
  19. ): TransitionConfig;
  1. transition:scale={params}
  1. in:scale={params}
  1. out:scale={params}

对元素的透明度和缩放进行动画处理。in 过渡从元素的当前（默认）值动画到作为参数传递的值。out 过渡从提供的值动画到元素的默认值。

scale 接受以下参数：

  • delay（number，默认为 0）— 开始之前的毫秒数
  • duration（number，默认为 400）— 过渡持续的毫秒数
  • easing（function，默认为 cubicOut）— 一个 easing 函数
  • start（number，默认为 0）— 淡出淡入的缩放起始值
  • opacity（number，默认为 0）— 淡出淡入的透明度值
  1. <script>
  2.     import { scale } from 'svelte/transition';
  3.     import { quintOut } from 'svelte/easing';
  4. </script>
  6. {#if condition}
  7.     <div transition:scale={{ duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut }}>
  8.         缩放进入和退出
  9.     </div>
  10. {/if}

draw

  1. function draw(
  3.   node: SVGElement & {
  5.     getTotalLength(): number;
  7.   },
  9.   {
  11.   delay,
  13.   speed,
  15.   duration,
  17.   easing
  19.   }?: DrawParams | undefined
  21. ): TransitionConfig;
  1. transition:draw={params}
  1. in:draw={params}
  1. out:draw={params}

像管子里的蛇一样，对 SVG 元素的笔画进行动画处理。in 过渡以路径不可见开始，并随着时间的推移在屏幕上绘制路径。out 过渡从可见状态开始，逐渐擦除路径。draw 仅适用于具有 getTotalLength 方法的元素，如 <path> 和 <polyline>。

draw 接受以下参数：

  • delay（number，默认为 0）— 开始之前的毫秒数
  • speed（number，默认为 undefined）— 动画的速度，见下文。
  • duration（number | function，默认为 800）— 过渡持续的毫秒数
  • easing（function，默认为 cubicInOut）— 一个 easing 函数

speed 参数是设置相对于路径长度的过渡持续时间的一种方式。它是一个应用于路径长度的修饰符：duration = length / speed。一个长度为 1000 像素的路径，速度为 1，将有 1000ms 的持续时间，将速度设置为 0.5 将使持续时间翻倍，设置为 2 将减半。

  1. <script>
  2.     import { draw } from 'svelte/transition';
  3.     import { quintOut } from 'svelte/easing';
  4. </script>
  6. <svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
  7.     {#if condition}
  8.         <path
  9.             transition:draw={{ duration: 5000, delay: 500, easing: quintOut }}
  10.             d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
  11.             fill="none"
  12.             stroke="cornflowerblue"
  13.             stroke-width="0.1px"
  14.             stroke-linejoin="round"
  15.         />
  16.     {/if}
  17. </svg>

crossfade

  1. function crossfade({
  3.   fallback,
  5.   ...defaults
  7. }: CrossfadeParams & {
  9.   fallback?:
  11.   | ((node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig)
  13.   | undefined;
  15. }): [
  17.   (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig,
  19.   (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig
  21. ];

crossfade 函数创建了一对名为 send 和 receive 的 transitions。当一个元素被 ‘send’ 时，它会寻找一个对应的正在 ‘receive’ 的元素，并生成一个过渡，将元素转换为它对应元素的位置并淡出。当一个元素正在 ‘receive’ 时，会发生相反的情况。如果没有对应的元素，将使用 fallback 过渡。

crossfade 接受以下参数：

  • delay（number，默认为 0）— 开始之前的毫秒数
  • duration（number | function，默认为 800）— 过渡持续的毫秒数
  • easing（function，默认为 cubicOut）— 一个 easing 函数
  • fallback（function）— 当发送时没有匹配的元素正在接收，以及接收时没有元素正在发送时使用的回退 transition。
  1. <script>
  2.     import { crossfade } from 'svelte/transition';
  3.     import { quintOut } from 'svelte/easing';
  5.     const [send, receive] = crossfade({
  6.         duration: 1500,
  7.         easing: quintOut
  8.     });
  9. </script>
  11. {#if condition}
  12.     <h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
  13. {:else}
  14.     <small in:send={{ key }} out:receive={{ key }}>small elem</small>
  15. {/if}

类型

BlurParams

  1. interface BlurParams {…}
  1. delay?: number;
  1. duration?: number;
  1. easing?: EasingFunction;
  1. amount?: number | string;
  1. opacity?: number;

CrossfadeParams

  1. interface CrossfadeParams {…}
  1. delay?: number;
  1. duration?: number | ((len: number) => number);
  1. easing?: EasingFunction;

DrawParams

  1. interface DrawParams {…}
  1. delay?: number;
  1. speed?: number;
  1. duration?: number | ((len: number) => number);
  1. easing?: EasingFunction;

EasingFunction

  1. type EasingFunction = (t: number) => number;

FadeParams

  1. interface FadeParams {…}
  1. delay?: number;
  1. duration?: number;
  1. easing?: EasingFunction;

FlyParams

  1. interface FlyParams {…}
  1. delay?: number;
  1. duration?: number;
  1. easing?: EasingFunction;
  1. x?: number | string;
  1. y?: number | string;
  1. opacity?: number;

ScaleParams

  1. interface ScaleParams {…}
  1. delay?: number;
  1. duration?: number;
  1. easing?: EasingFunction;
  1. start?: number;
  1. opacity?: number;

SlideParams

  1. interface SlideParams {…}
  1. delay?: number;
  1. duration?: number;
  1. easing?: EasingFunction;
  1. axis?: 'x' | 'y';

TransitionConfig

  1. interface TransitionConfig {…}
  1. delay?: number;
  1. duration?: number;
  1. easing?: EasingFunction;
  1. css?: (t: number, u: number) => string;
  1. tick?: (t: number, u: number) =>  void;