svelte/animate

svelte/animate 模块导出一个函数以与 Svelte animations 一起使用。

英The svelte/animate module exports one function for use with Svelte animations.

flippermalink

导出片段： svelte/animate#flip

animate:flip={params}

flip 函数计算元素的开始和结束位置并在它们之间进行动画处理，转换 x 和 y 值。 flip 代表 第一个、最后一个、反转、播放。

英The flip function calculates the start and end position of an element and animates between them, translating the x and y values. flip stands for First, Last, Invert, Play.

flip 接受以下参数：

英flip accepts the following parameters:

• delay （number，默认 0） — 开始前的毫秒数
• duration（number） | function，默认 d => Math.sqrt(d) * 120) — 见下文
• easing （function，默认 cubicOut） — 一个 缓动函数

duration 可以提供为：

英duration can be provided as either:

• a number，以毫秒为单位。
• 函数 distance: number => duration: number，接收元素将行进的距离（以像素为单位）并返回以毫秒为单位的持续时间。 这允许你指定与每个元素行进的距离相关的持续时间。

你可以在 动画教程 上看到完整的示例。

英You can see a full example on the animations tutorial.

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

类型(Types)permalink

类型： svelte/animate