The `svelte/transition` module exports seven functions: `fade`, `blur`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with Svelte [`transitions`](/docs/element-directives#transition-fn).
Le module `svelte/transition` exporte 7 fonctions : `fade`, `blur`, `fly`, `slide`, `scale`, `draw` et `crossfade`. Ces fonctions sont utilisables avec les [`transitions`](/docs/element-directives#transition-fn) Svelte.
## `fade`
@ -20,15 +20,15 @@ in:fade={params}
out:fade={params}
```
Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.
Anime l'opacité d'un élément de 0 jusqu'à l'opacité courante pour les transitions de type `in` et depuis l'opacité courante vers 0 pour les transitions de type `out`.
`fade` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `fade`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `linear`) — une [fonction de lissage](/docs/svelte-easing)
You can see the `fade` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/transition).
Un exemple de transition de type `fade` est présenté dans le [tutoriel relatif aux transitions](https://learn.svelte.dev/tutorial/transition).
```svelte
<script>
@ -36,7 +36,7 @@ You can see the `fade` transition in action in the [transition tutorial](https:/
</script>
{#if condition}
<divtransition:fade={{delay:250,duration:300}}>fades in and out</div>
<divtransition:fade={{delay:250,duration:300}}>Apparaît et disparaît en s'estompant</div>
{/if}
```
@ -56,15 +56,15 @@ in:blur={params}
out:blur={params}
```
Animates a `blur` filter alongside an element's opacity.
Anime le filtre de flou (`blur`) en même temps que l'opacité d'un élément.
`blur` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `blur`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
- `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
* `amount` (`number | string`, par défaut 5) - la taille du flou. Supporte les unités CSS (par exemple : `"4rem"`). L'unité par défaut est `px`.
```svelte
<script>
@ -72,7 +72,7 @@ Animates a `blur` filter alongside an element's opacity.
</script>
{#if condition}
<divtransition:blur={{amount:10}}>fades in and out</div>
<divtransition:blur={{amount:10}}>Apparaît et disparaît avec un flou</div>
{/if}
```
@ -92,19 +92,20 @@ in:fly={params}
out:fly={params}
```
Animates 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.
Anime les positions x, y et l'opacité d'un élément. Les transitions entrantes (`in`) permettent d'animer les propriétés depuis les valeurs spécifiées, passées en tant que paramètres, vers les valeurs par défaut. Les transitions sortantes (`out`) permettent quant à elles d'animer depuis les valeurs par défaut de l'élément vers les valeurs spécifiées.
`fly` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `fly`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
- `x` (`number | string`, default 0) - the x offset to animate out to and in from
- `y` (`number | string`, default 0) - the y offset to animate out to and in from
- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
* `x` (`number | string`, par défaut 0) - décalage horizontal de l'animation
* `y` (`number | string`, par défaut 0) - décalage vertical de l'animation
* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
You can see the `fly` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/adding-parameters-to-transitions).
x et y utilisent `px` par défaut mais supportent les unités CSS, par exemple `x: '100vw'` ou `y: '50%'`.
Un exemple de transition de type `fly` est présenté dans le [tutoriel relatif aux transitions](https://learn.svelte.dev/tutorial/adding-parameters-to-transitions).
```svelte
<script>
@ -116,7 +117,7 @@ You can see the `fly` transition in action in the [transition tutorial](https://
Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
Anime l'opacité et l'échelle d'un élément. Les transitions entrantes (`in`) s'animent à partir des valeurs fournies en paramètre vers les valeurs par défaut de l'élément, passées en paramètres. Les transitions sortantes (`out`) s'animent à partir des valeurs par défaut de l'élément vers les valeurs fournies en paramètre.
`scale` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `scale`:
- `delay` (`number`, default 0) — milliseconds before starting
- `duration` (`number`, default 400) — milliseconds the transition lasts
- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
- `start` (`number`, default 0) - the scale value to animate out to and in from
- `opacity` (`number`, default 0) - the opacity value to animate out to and in from
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number`, par défaut 400) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
* `start` (`number`, par défaut 0) - ratio d'agrandissement de l'animation
* `opacity` (`number`, par défaut 0) - opacité cible de l'animation
```svelte
<script>
@ -194,7 +194,7 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
Animates 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 `<path>` and`<polyline>`.
Anime le tracé d'un élément SVG, comme un serpent dans un tube. Les transitions entrantes (`in`) commencent avec le tracé non visible et dessinent le tracé. Les transitions sortantes (`out`) commencent avec le tracé visible et l'effacent au fur et à mesure. L'animation `draw` ne fonctionne qu'avec les éléments ayant la méthode `getTotalLength`, comme `<path>` et`<polyline>`.
`draw` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `draw`:
- `delay` (`number`, default 0) — milliseconds before starting
- `speed` (`number`, default undefined) - the speed of the animation, see below.
- `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `speed` (`number`, par défaut undefined) - vitesse de l'animation, voir ci-dessous.
* `duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
Le paramètre de vitesse `speed` peut être utilisé à la place du paramètre durée `duration` pour spécifier la vitesse de la transition en fonction de la longueur totale du chemin. Il s'agit d'un coefficient permettant de calculer la durée de l'animation : `durée = longueur / vitesse` (`duration = length / speed`). Par exemple, un chemin qui mesure 1000 pixels de long avec une vitesse de 1 aura une durée de 1000ms. Avec une vitesse de `0.5`, l'animation aura un temps doublé. Avec une vitesse de `2`, l'animation sera deux fois plus lente.
```svelte
<script>
@ -250,14 +250,14 @@ The `speed` parameter is a means of setting the duration of the transition relat
> EXPORT_SNIPPET: svelte/transition#crossfade
The `crossfade` function creates a pair of [transitions](/docs/element-directives#transition-fn) 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.
La fonction de fondu croisé `crossfade` crée deux [transitions](/docs/element-directives#transition-fn) appelées `send` et `receive`. Quand un élément est "envoyé", Svelte cherche un élément correspondant "reçu" et génère une transition qui déplace l'élément vers la position de sa contrepartie en le faisant disparaître. Quand un élément est "reçu", l'inverse s'applique. S'il n'y a pas d'élément reçu, la transition par défaut `fallback` s'applique.
`crossfade` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `crossfade`:
- `delay` (`number`, default 0) — milliseconds before starting
- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
- `fallback` (`function`) — A fallback [transition](/docs/element-directives#transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
* `delay` (`number`, par défaut 0) - millisecondes avant le démarrage
* `duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
* `fallback` (`function`) — une [transition](/docs/element-directives#transition-fn) de secours à utiliser lorsqu'il n'y a pas d'élément "reçu" correspondant.
```svelte
<script>
@ -271,9 +271,9 @@ The `crossfade` function creates a pair of [transitions](/docs/element-directive
The `svelte/animate` module exports one function for use with Svelte [animations](/docs/element-directives#animate-fn).
Le module `svelte/animate` exporte une fonction à utiliser avec les [animations](/docs/element-directives#animate-fn) Svelte.
## `flip`
@ -12,20 +12,21 @@ The `svelte/animate` module exports one function for use with Svelte [animations
animate:flip={params}
```
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](https://aerotwist.com/blog/flip-your-animations/).
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](https://aerotwist.com/blog/flip-your-animations/) (en anglais).
`flip` accepts the following parameters:
Les paramètres suivants peuvent être utilisés avec `flip`:
- `delay` (`number`, default 0) — milliseconds before starting
* `easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
`duration` can be provided as either:
- a `number`, in milliseconds.
- a function, `distance: number => duration: number`, receiving the distance the element will travel in pixels and returning the duration in milliseconds. This allows you to assign a duration that is relative to the distance travelled by each element.
Le paramètre de durée `duration` peut être:
You can see a full example on the [animations tutorial](https://learn.svelte.dev/tutorial/animate).
- 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](https://learn.svelte.dev/tutorial/animate).
Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. `svelte/easing` contains 31 named exports, a `linear` ease and 3 variants of 10 different easing functions: `in`, `out` and`inOut`.
Les fonctions de lissage permettent de configurer la vitesse de transitions ou d'animations. Elles peuvent également être utilisées avec les <spanclass="vo">[stores](/docs/sveltejs#store)</span> [`tweened`](/docs/svelte-motion#tweened) et [`spring`](/docs/svelte-motion#spring). `svelte/easing` exporte 31 utilitaires, une fonction de lissage linéaire (`linear`), et 3 variantes de 10 différentes fonctions de lissage : `in`, `out` et`inOut`.
You can explore the various eases using the [ease visualiser](/examples/easing) in the [examples section](/examples).
Un exemple de chaque méthode est présenté dans le [démonstrateur des fonctions de lissage](/examples/easing) ainsi que dans la section d'[exemples](/examples).
Actions are functions that are called when an element is created. They can return an object with a `destroy` method that is called after the element is unmounted:
Les actions sont des fonctions exécutées lorsqu'un élément est créé. Elles peuvent renvoyer un objet avec une méthode `destroy` qui sera appelée lors de la destruction de l'élément.
```svelte
<!--- file: App.svelte --->
<script>
/** @type {import('svelte/action').Action} */
function foo(node) {
// the node has been mounted in the DOM
// le noeud a été ajouté au DOM
return {
destroy() {
// the node has been removed from the DOM
// le noeud a été supprimé du DOM
}
};
}
@ -22,9 +22,9 @@ Actions are functions that are called when an element is created. They can retur
<divuse:foo/>
```
An action can have a parameter. If the returned value has an `update` method, it will be called immediately after Svelte has applied updates to the markup whenever that parameter changes.
Une action peut avoir un argument. Si la valeur renvoyée possède une méthode `update`, celle-ci sera exécutée à chaque fois que cet argument changera, juste après que Svelte a appliqué les modifications au <spanclass="vo">[markup](/docs/web#markup)</span>.
> Don't worry that we're redeclaring the `foo` function for every component instance — Svelte will hoist any functions that don't depend on local state out of the component definition.
> Ne vous inquiétez pas du fait que l'on redéclare la fonction `foo` pour chaque instance — Svelte garde en mémoire toute fonction qui ne dépend pas d'un état local en dehors de la définition du composant.
```svelte
<!--- file: App.svelte --->
@ -34,15 +34,15 @@ An action can have a parameter. If the returned value has an `update` method, it
@ -53,6 +53,8 @@ An action can have a parameter. If the returned value has an `update` method, it
## Attributes
Les actions émettent parfois des évènements ou appliquent des attributs personnalisés à l'élément sur lequel elles sont utilisées. Pour gérer cela, les actions typées avec `Action` ou `ActionReturn` peuvent avoir un dernier paramètres, `Attributes` :
Sometimes actions emit custom events and apply custom attributes to the element they are applied to. To support this, actions typed with `Action` or `ActionReturn` type can have a last parameter, `Attributes`:
```svelte
@ -62,14 +64,14 @@ Sometimes actions emit custom events and apply custom attributes to the element