svelte/animate

svelte/animate 模块导出一个用于 svelte 动画的函数。

filp

  1. animate:flip={params}

flip 函数计算元素的开始和结束位置，并通过转换x、y坐标对他们设置动画。flip 主张的是First，Last，Invert，Play。

flip 接受下面这些参数：

  • delay (number，默认 0) - 开始前的毫秒数
  • duration (number|function, 默认 d => Math.sqrt(d) * 120) - 参见下文
  • easing (function, cubicOut) - 缓动函数 duration可以通过下面任一形式定义：
  • 一个number，以毫秒为单位
  • 一个函数，distance: number => duration: number，接受distance的元素将以像素为单位进行移动，并以毫秒为单位返回持续的时间。支持指定相对于每个元素移动的持续时间。
  1. <script>
  2.     import { flip } from 'svelte/animate';
  3.     import { quintOut } from 'svelte/easing';
  5.     let list = [1, 2, 3];
  6. </script>
  8. {#each list as n (n)}
  9.     <div animate:flip="{{delay: 250, duration: 250, easing: quintOut}}">
  10.         {n}
  11.     </div>
  12. {/each}

你可以在 animate tutorial 看到完整的示例。