svelte/animate
モジュールは、Svelte animations で使用するための関数を1つエクスポートします。
flippermalink
ts
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
, default 0) — 開始前の待ち時間のミリ秒duration
(number
|function
, defaultd => Math.sqrt(d) * 120
) — 下記を参照してくださいeasing
(function
, defaultcubicOut
) — イージング関数
duration
は、以下のいずれかを指定することができます。
number
— ミリ秒単位です。- 関数
distance: number => duration: number
— 要素の移動距離をピクセル単位で受け取り、その時間をミリ秒単位で返します。これにより、各要素の持続時間に対する移動距離を割り当てることができます。
アニメーションのチュートリアルで完全な例をご覧ください。
<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}
Typespermalink
AnimationConfigpermalink
ts
interface AnimationConfig {…}
ts
delay?: number;
ts
duration?: number;
ts
easing?: (t: number) => number;
ts
css?: (t: number, u: number) => string;
ts
tick?: (t: number, u: number) => void;
FlipParamspermalink
ts
interface FlipParams {…}
ts
delay?: number;
ts
duration?: number | ((len: number) => number);
ts
easing?: (t: number) => number;