Skip to main content



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

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


导出片段: svelte/animate#flip


flip 函数计算元素的开始和结束位置并在它们之间进行动画处理,转换 xy 值。 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:

  • delaynumber,默认 0) — 开始前的毫秒数
  • durationnumber) | function,默认 d => Math.sqrt(d) * 120) — 见下文
  • easingfunction,默认 cubicOut) — 一个 缓动函数

duration 可以提供为:

duration can be provided as either:

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

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

You can see a full example on the animations tutorial.

	import { flip } from 'svelte/animate';
	import { quintOut } from 'svelte/easing';

	let list = [1, 2, 3];

{#each list as n (n)}
	<div animate:flip={{ delay: 250, duration: 250, easing: quintOut }}>


类型: svelte/animate

下一页 svelte/easing