Svelte模板语法

animate:

当锁定每个块的内容重新排序时会触发动画。添加或删除元素时动画不会运行，仅当每个块中现有数据项的索引发生更改时才会运行。Animate 指令必须位于作为键控每个块的直接子元素的元素上。

¥An animation is triggered when the contents of a keyed each block are re-ordered. Animations do not run when an element is added or removed, only when the index of an existing data item within the each block changes. Animate directives must be on an element that is an immediate child of a keyed each block.

为元素的 x 和 y 位置以及不透明度设置动画。

¥Animations can be used with Svelte’s built-in animation functions or custom animation functions.

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

动画参数(Animation Parameters)

¥Animation Parameters

与动作和转场一样，动画也可以有参数。

¥As with actions and transitions, animations can have parameters.

（双 {{curlies}} 不是特殊语法；这是表达式标记内的对象字面量。）

¥(The double {{curlies}} aren’t a special syntax; this is an object literal inside an expression tag.)

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

自定义动画函数(Custom animation functions)

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

动画可以与 Svelte 的 node 或 animation 一起使用。animation 参数是一个包含 from 和 to 属性的对象，每个属性都包含一个 DOMRect，描述元素在其 start 和 end 位置的几何形状。from 属性是元素在其起始位置的 DOMRect，to 属性是列表重新排序和 DOM 更新后元素在其最终位置的 DOMRect。

¥Animations can use custom functions that provide the node, an animation object and any parameters as arguments. The animation parameter is an object containing from and to properties each containing a DOMRect describing the geometry of the element in its start and end positions. The from property is the DOMRect of the element in its starting position, and the to property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.

如果返回的对象具有 css 方法，Svelte 将创建一个在元素上播放的网页动画。

¥If the returned object has a css method, Svelte will create a web animation that plays on the element.

在应用 easing 函数后，传递给 css 的 t 参数是介于 0 和 1 之间的值。u 参数等于 1 - t。

¥The t argument passed to css is a value that goes from 0 and 1 after the easing function has been applied. The u argument is equal to 1 - t.

在动画开始之前，使用不同的 t 和 u 参数反复调用该函数。

¥The function is called repeatedly before the animation begins, with different t and u arguments.

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 参数调用。

¥A custom animation function can also return a tick function, which is called during the animation with the same t and u arguments.

如果可以使用 css 代替 tick，请这样做 — Web 动画可以在主线程中运行，从而防止在较慢的设备上出现卡顿。

¥[!NOTE] If it’s possible to use css instead of tick, do so — web animations can run off the main thread, preventing jank on slower devices.

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}

in:and out: style: