```js // @noErrors import { blur, crossfade, draw, fade, fly, scale, slide } from 'svelte/transition'; ``` ## blur Anime un filtre de flou (`blur`) en même temps que l'opacité d'un élement.
```dts function blur( node: Element, { delay, duration, easing, amount, opacity }?: BlurParams | undefined ): TransitionConfig; ```
## crossfade La fonction `crossfade` crée une paire de [transitions](/docs/svelte/transition) 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.
```dts 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 `` et ``.
```dts 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`.
```dts 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.
```dts 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.
```dts 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.
```dts function slide( node: Element, { delay, duration, easing, axis }?: SlideParams | undefined ): TransitionConfig; ```
## BlurParams
```dts interface BlurParams {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number; ```
```dts easing?: EasingFunction; ```
```dts amount?: number | string; ```
```dts opacity?: number; ```
## CrossfadeParams
```dts interface CrossfadeParams {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number | ((len: number) => number); ```
```dts easing?: EasingFunction; ```
## DrawParams
```dts interface DrawParams {/*…*/} ```
```dts delay?: number; ```
```dts speed?: number; ```
```dts duration?: number | ((len: number) => number); ```
```dts easing?: EasingFunction; ```
## EasingFunction
```dts type EasingFunction = (t: number) => number; ```
## FadeParams
```dts interface FadeParams {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number; ```
```dts easing?: EasingFunction; ```
## FlyParams
```dts interface FlyParams {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number; ```
```dts easing?: EasingFunction; ```
```dts x?: number | string; ```
```dts y?: number | string; ```
```dts opacity?: number; ```
## ScaleParams
```dts interface ScaleParams {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number; ```
```dts easing?: EasingFunction; ```
```dts start?: number; ```
```dts opacity?: number; ```
## SlideParams
```dts interface SlideParams {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number; ```
```dts easing?: EasingFunction; ```
```dts axis?: 'x' | 'y'; ```
## TransitionConfig
```dts interface TransitionConfig {/*…*/} ```
```dts delay?: number; ```
```dts duration?: number; ```
```dts easing?: EasingFunction; ```
```dts css?: (t: number, u: number) => string; ```
```dts tick?: (t: number, u: number) => void; ```