svelte/animate

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, default d => Math.sqrt(d) * 120) — 下記を参照してください
• easing (function, default cubicOut) — イージング関数

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;