svelte/animate

Le module svelte/animate exporte une fonction à utiliser avec les animations Svelte.

flippermalink

ts
function flip(
	node: Element,
	{
		from,
		to
	}: {
		from: DOMRect;
		to: DOMRect;
	},
	params?: FlipParams
): AnimationConfig;

animate:flip={params}

La méthode flip calcule la position de départ et d'arrivée d'un élément et génère une animation de translation des coordonnées x et y. Le mot flip est l'acronyme de First, Last, Invert, Play (en anglais).

Les paramètres suivants peuvent être utilisés avec flip :

• delay (number, par défaut 0) - millisecondes avant le démarrage
• duration (number | function, par défaut d => Math.sqrt(d) * 120) - voir ci-dessous
• easing (function, par défaut cubicOut) — une fonction de lissage

Le paramètre de durée duration peut être:

• soit un nombre, en millisecondes.
• une fonction, distance: number => duration: number, dont le paramètre correspond à la distance que l'élément va parcourir en pixels et qui retourne la durée en millisecondes. Cela permet de définir une durée, relative à la distance parcourue de l'élément.

Un exemple complet est présenté dans le tutoriel relatif aux animations.

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

Typespermalink

AnimationConfigpermalink

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;

FlipParamspermalink

ts
interface FlipParams {…}

ts
delay?: number;

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

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