svelte/animate

svelte/animate 模块导出一个函数，用于 Svelte 动画。

flip永久链接

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，默认值为 0）——开始前的毫秒数
• duration（number | function，默认值为 d => Math.sqrt(d) * 120）——见下文
• easing（function，默认值为 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}

类型永久链接

AnimationConfig永久链接

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;

FlipParams永久链接

ts
interface FlipParams {…}

ts
delay?: number;

ts
duration?: number | ((len: number) => number);

ts
easing?: (t: number) => number;