svelte/transition

svelte/transition 模块暴露了 6 个方法，分别是：fade，fly，slide，scale，draw 和 crossfade。它们是用于 svelte transitions。

fade

  1. transition:fade={params}
  1. in:fade={params}
  1. out:fade={params}
  1. <script>
  2.     import { fade } from 'svelte/transition';
  3. </script>
  5. {#if condition}
  6.     <div transition:fade="{{delay: 250, duration: 300}}">
  7.         fades in and out
  8.     </div>
  9. {/if}

in 过渡动画是透明度从 0 过渡到当前指定的透明度，out 过渡动画是透明度从当前指定的透明度过渡到 0。 fade 可以传入以下几个参数：

  • dealy（number，默认为 0）——动画开始之前的延迟毫秒数。
  • duration（number，默认为 400）——过渡动画持续的毫秒数。 你可以在 transition tutorial 中看到 fade 过渡动画是如何被使用的。

fly

  1. transition:fly={params}
  1. in:fly={params}
  1. out:fly={params}

设定元素在 x 轴、y 轴以及透明度上的动画。in 过渡动画将会从元素当前（默认）的状态过渡到用户提供的从参数传入的状态。out 过渡动画将会从用户提供的状态过渡到默认的状态。

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

fly 可以传入以下几个参数：

  • dealy（number，默认为 0）——动画开始之前的延迟毫秒数。
  • duration（number，默认为 400）——过渡动画持续的毫秒数。
  • easing（function，默认为 cubicOut）——一个 easing function
  • x（number，默认为 0)—— x 轴上的偏移量，即渐入时的开始量，渐出时的结束量。
  • y（number，默认为 0)—— y 轴上的偏移量，即渐入时的开始量，渐出时的结束量。
  • opacity（number，默认为 0）—— 动画时的透明度值，即渐入时的开始量，渐出时的结束量。 你可以在 [transition tutorial](https://svelte.dev/tutorial/transition) 中看到fade` 过渡动画是如何被使用的。

slide

  1. transition:slide={params}
  1. in:slide={params}
  1. out:slide={params}

渐入或渐出时滑动元素。

  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 }}">
  8.         slides in and out
  9.     </div>
  10. {/if}

slide 可以传入以下几个参数：

  • dealy（number，默认为 0）——动画开始之前的延迟毫秒数。
  • duration（number，默认为 400）——过渡动画持续的毫秒数。
  • easing（function，默认为 cubicOut）——一个 easing function

scale

  1. transition:scale={params}
  1. in:scale={params}
  1. out:scale={params}
  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.         scales in and out
  9.     </div>
  10. {/if}

scale 可以传入以下几个参数：

  • dealy（number，默认为 0）——动画开始之前的延迟毫秒数。
  • duration（number，默认为 400）——过渡动画持续的毫秒数。
  • easing（function，默认为 cubicOut）——一个 easing function
  • start（number，默认为 0）——动画时的缩放值，即渐入时的开始量，渐出时的结束量。
  • opacity（`number，默认为 0）—— 动画时的透明度值，即渐入时的开始量，渐出时的结束量。

draw

  1. transition:draw={params}
  1. in:draw={params}
  1. out:draw={params}
  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 transition:draw="{{duration: 5000, delay: 500, easing: quintOut}}"
  9.                     d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z"
  10.                     fill="none"
  11.                     stroke="cornflowerblue"
  12.                     stroke-width="0.1px"
  13.                     stroke-linejoin="round"
  14.         />
  15.     {/if}
  16. </svg>

SVG 元素笔画的动画，就像管道中的蛇一样。在过渡动画的开始路径并不可见，随着时间的推移逐渐绘制这个路径。out 过渡动画时从路径可见的状态开始，逐渐隐藏路径。draw 仅适用于具有 getTotalLength 方法的元素，如 <path> 和<polyline>

scale 可以传入以下几个参数：

  • dealy（number，默认为 0）——动画开始之前的延迟毫秒数。
  • speed（number，默认为 undefined）——动画的速度，详见下面的说明。
  • duration（number，默认为 800）——过渡动画持续的毫秒数。
  • easing（function，默认为 cubicOut）——一个 easing function

speed 参数是用来设置与路径长度相关的转换动画持续时间的一种方法。它是一个用在路径长度上的修饰符：duration = length / speed。一个长度为 1000 像素的路径，速度为 1 时，它的持续时间是 1000ms，当速度设置为 0.5 时会让持续时间折半，当设置为 2 时持续时间会翻倍。