SvelteRéférence

svelte/transition

import {
	function blur(node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined): TransitionConfigAnimates a blur filter alongside an element’s opacity.
blur,
	function crossfade({ fallback, ...defaults }: CrossfadeParams & {
    fallback?: (node: Element, params: CrossfadeParams, intro: boolean) => TransitionConfig;
}): [(node: any, params: CrossfadeParams & {
    key: any;
}) => () => TransitionConfig, (node: any, params: CrossfadeParams & {
    key: any;
}) => () => TransitionConfig]The crossfade function creates a pair of transitions called send and receive. When an element is ‘sent’, it looks for a corresponding element being ‘received’, and generates a transition that transforms the element to its counterpart’s position and fades it out. When an element is ‘received’, the reverse happens. If there is no counterpart, the fallback transition is used.
crossfade,
	function draw(node: SVGElement & {
    getTotalLength(): number;
}, { delay, speed, duration, easing }?: DrawParams | undefined): TransitionConfigAnimates the stroke of an SVG element, like a snake in a tube. in transitions begin with the path invisible and draw the path to the screen over time. out transitions start in a visible state and gradually erase the path. draw only works with elements that have a getTotalLength method, like &#x3C;path> and &#x3C;polyline>.
draw,
	function fade(node: Element, { delay, duration, easing }?: FadeParams | undefined): TransitionConfigAnimates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.
fade,
	function fly(node: Element, { delay, duration, easing, x, y, opacity }?: FlyParams | undefined): TransitionConfigAnimates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element’s default values. out transitions animate from the element’s default values to the provided values.
fly,
	function scale(node: Element, { delay, duration, easing, start, opacity }?: ScaleParams | undefined): TransitionConfigAnimates the opacity and scale of an element. in transitions animate from the provided values, passed as parameters, to an element’s current (default) values. out transitions animate from an element’s default values to the provided values.
scale,
	function slide(node: Element, { delay, duration, easing, axis }?: SlideParams | undefined): TransitionConfigSlides an element in and out.
slide
} from 'svelte/transition';

blur

Anime un filtre de flou (blur) en même temps que l’opacité d’un élement.

function blur(
	node: Element,
	{
		delay,
		duration,
		easing,
		amount,
		opacity
	}?: BlurParams | undefined
): TransitionConfig;

crossfade

La fonction crossfade crée une paire de transitions appelées send (“envoyer”) et receive (“recevoir”). Lorsqu’un élément est “envoyé”, il cherche un élément de "réception” correspondant, et génère une transition qui transforme l’élément vers la position de sa contrepartie et le fait disparaître progressivement. Lorsque l’élément est “reçu”, l’inverse se produit. S’il n’y a pas d’élément de contrepartie, la transition fallback est utilisée à la place.

function crossfade({
	fallback,
	...defaults
}: CrossfadeParams & {
	fallback?: (
		node: Element,
		params: CrossfadeParams,
		intro: boolean
	) => TransitionConfig;
}): [
	(
		node: any,
		params: CrossfadeParams & {
			key: any;
		}
	) => () => TransitionConfig,
	(
		node: any,
		params: CrossfadeParams & {
			key: any;
		}
	) => () => TransitionConfig
];

draw

Anime le trait d’un élément SVG, comme un serpent dans un tube. Les transitions in commencent avec le path invisible et dessinent le path au fur et à mesure. Les transitions out commencent avec un path visible et l’effacent progressivement. draw ne fonctionne qu’avec des éléments qui ont une méthode getTotalLength, comme <path> et <polyline>.

function draw(
	node: SVGElement & {
		getTotalLength(): number;
	},
	{
		delay,
		speed,
		duration,
		easing
	}?: DrawParams | undefined
): TransitionConfig;

fade

Anime l’opacité d’un élément de 0 à l’opacité courante pour les transitions in, et de l’opacité courante vers 0 pour les transitions out.

function fade(
	node: Element,
	{ delay, duration, easing }?: FadeParams | undefined
): TransitionConfig;

fly

Anime les positions x et y ainsi que l’opacité d’un élément. Les transitions in animent depuis les valeurs fournies, passées en paramètres, vers les positions par défaut de l’élément. Les transitions out animent depuis les positions par défaut de l’élément vers les valeurs fournies.

function fly(
	node: Element,
	{
		delay,
		duration,
		easing,
		x,
		y,
		opacity
	}?: FlyParams | undefined
): TransitionConfig;

scale

Anime l’opacité et l’échelle d’un élément. Les transitions in animent depuis les valeurs fournies, passées en paramètres, vers les valeurs courantes (par défaut) d’un élément. Les transitions out animent depuis les valeurs courantes (par défaut) d’un élément vers les valeurs fournies.

function scale(
	node: Element,
	{
		delay,
		duration,
		easing,
		start,
		opacity
	}?: ScaleParams | undefined
): TransitionConfig;

slide

Transitionne un élément en le faisant entrer ou sortir en glissant.

function slide(
	node: Element,
	{
		delay,
		duration,
		easing,
		axis
	}?: SlideParams | undefined
): TransitionConfig;

BlurParams

interface BlurParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

amount?: number | string;

opacity?: number;

CrossfadeParams

interface CrossfadeParams {…}

delay?: number;

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

easing?: EasingFunction;

DrawParams

interface DrawParams {…}

delay?: number;

speed?: number;

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

easing?: EasingFunction;

EasingFunction

type EasingFunction = (t: number) => number;

FadeParams

interface FadeParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

FlyParams

interface FlyParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

x?: number | string;

y?: number | string;

opacity?: number;

ScaleParams

interface ScaleParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

start?: number;

opacity?: number;

SlideParams

interface SlideParams {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

axis?: 'x' | 'y';

TransitionConfig

interface TransitionConfig {…}

delay?: number;

duration?: number;

easing?: EasingFunction;

css?: (t: number, u: number) => string;

tick?: (t: number, u: number) => void;

Modifier cette page sur Github

précédent suivant

svelte/store Erreurs de compilation