Svelteテンプレート構文

animate

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

アニメーションは、Svelteのビルトインアニメーション関数またはカスタムアニメーション関数で使用できます。

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

アニメーションパラメータ

アクションやトランジションと同様に、アニメーションにはパラメータを指定できます。

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

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

カスタムアニメーション関数

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オブジェクト、および任意のパラメータを引数として受け取るカスタム関数を使用できます。animationパラメータは、それぞれstartおよびend位置での要素のジオメトリを表すDOMRectを含むfromおよびtoプロパティを含むオブジェクトです。fromプロパティは、開始位置での要素のDOMRectであり、toプロパティは、リストの並べ替えとDOMの更新後の最終位置での要素のDOMRectです。

返されたオブジェクトにcssメソッドが含まれている場合、Svelteは要素で再生されるウェブアニメーションを作成します。

cssに渡されるt引数は、easing関数の適用後に0から1までの値になります。u引数は1 - tと等しくなります。

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

アプリ

<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}

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

tickではなくcssを使用できる場合は、そうしてください。ウェブアニメーションはメインスレッドから実行できるため、低速なデバイスでのジャンクを防止できます。

アプリ

<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}

GitHubでこのページを編集する

前へ次へ

in: と out class