SvelteTemplate syntax

animate:

keyed each block のコンテンツが並べ替えられると、アニメーションがトリガーされます。アニメーションは要素が追加または削除されたときには実行されず、each ブロック内の既存データ項目のインデックスが変更された場合にのみ実行されます。animate ディレクティブは、keyed each ブロックの直下にある要素に付ける必要があります。

アニメーションは、Svelte の組み込みアニメーション関数またはカスタムアニメーション関数を使用して実現できます。

<!-- When `list` is reordered the animation will run -->
{#each list as item, index (item)}
	<li animate:flip>{item}</li>
{/each}

Animation Parameters

action や transition と同様に、アニメーションにもパラメータを設定することができます。

(二重の {{curlies}} は特別な構文ではありません。これは式タグ内のオブジェクトリテラルです。)

{#each list as item, index (item)}
	<li animate:flip={{ delay: 500 }}>{item}</li>
{/each}

Custom animation functions

animation = (node: HTMLElementnode: HTMLElement, { from: anyfrom: type DOMRect: anyDOMRect, to: anyto: type DOMRect: anyDOMRect } , params: anyparams: any) => {
	delay?: number,
	duration?: number,
	easing?: (t: numbert: number) => number,
	css?: (t: numbert: number, u: numberu: number) => string,
	tick?: (t: numbert: number, u: numberu: number) => void
}

アニメーションには、node、animation オブジェクト、および任意の parameters を引数として提供するカスタム関数を使用することができます。animation パラメータは、要素の start と end の位置を記述した DOMRect を含む from および to プロパティを持つオブジェクトです。from プロパティは要素の開始位置を表す DOMRect で、to プロパティはリストが並べ替えられて DOM が更新された後の要素の最終位置を表す DOMRect です。

返されたオブジェクトに css メソッドがある場合、Svelte は要素上で再生される web animation を作成します。

css に渡される t 引数は、easing 関数が適用された後に 0 から 1 に変化する値です。u 引数は 1 - t に等しい値です。

この関数は、アニメーションが開始する前に異なる t および u 引数で繰り返し呼び出されます。

App

<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }} states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}

<script lang="ts">
	import { cubicOut } from 'svelte/easing';

	function whizz(node: HTMLElement, { from, to }: { from: DOMRect; to: DOMRect }, params: any) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) => `transform: translate(${u * dx}px, ${u * dy}px) rotate(${t * 360}deg);`
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}

カスタムアニメーション関数は tick 関数を返すことも可能で、これはアニメーション中に同じ t および u 引数で呼び出されます。

tick の代わりに css を使用できる場合はそうしてください — web animation はメインスレッド外で実行できるため、遅いデバイスでのカクつきを防ぐことができます。

App

<script>
	import { cubicOut } from 'svelte/easing';

	/**
	 * @param {HTMLElement} node
	 * @param {{ from: DOMRect; to: DOMRect }} states
	 * @param {any} params
	 */
	function whizz(node, { from, to }, params) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}

<script lang="ts">
	import { cubicOut } from 'svelte/easing';

	function whizz(node: HTMLElement, { from, to }: { from: DOMRect; to: DOMRect }, params: any) {
		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			tick: (t, u) => Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}

Edit this page on GitHub

previous next

in: and out: style: