svelte/animate

svelte/animate 模块导出了一个函数，用于 Svelte 的 animations。

flip

function flip(
    node: Element,
    {
        from,
        to
    }: {
        from: DOMRect;
        to: DOMRect;
    },
    params?: FlipParams
): AnimationConfig;

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）— 一个 easing 函数

duration 可以提供为：

• 一个 number，以毫秒为单位。
• 一个函数，distance: number => duration: number，接收元素将移动的像素距离，并以毫秒为单位返回持续时间。这允许你为每个元素分配一个与移动距离相对的持续时间。

你可以在 animations 教程 上看到完整示例。

<script>
    import { flip } from 'svelte/animate';
    import { quintOut } from 'svelte/easing';
    let list = [1, 2, 3];
</script>
{#each list as n (n)}
    <div animate:flip={{ delay: 250, duration: 250, easing: quintOut }}>
        {n}
    </div>
{/each}

类型

AnimationConfig

interface AnimationConfig {…}

delay?: number;

duration?: number;

easing?: (t: number) => number;

css?: (t: number, u: number) => string;

tick?: (t: number, u: number) =>  void;

FlipParams

interface FlipParams {…}

delay?: number;

duration?: number | ((len: number) => number);

easing?: (t: number) => number;