docs: 03-transition (#25)

* docs: 03-transition

* docs: 03-animate 03-easing 03-action

---------

Co-authored-by: Romain Crestey <romain.crestey@radiofrance.com>
pull/9156/head
Romain l'Ourson 3 years ago committed by Romain Crestey
parent c126c453e6
commit 7502127bd1

@ -2,7 +2,7 @@
title: 'svelte/transition'
---
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}
<div transition:fade={{ delay: 250, duration: 300 }}>fades in and out</div>
<div transition: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}
<div transition:blur={{ amount: 10 }}>fades in and out</div>
<div transition: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://
<div
transition:fly={{ delay: 250, duration: 300, x: 100, y: 500, opacity: 0.5, easing: quintOut }}
>
flies in and out
apparaît et disparaît avec un déplacement
</div>
{/if}
```
@ -137,15 +138,14 @@ in:slide={params}
out:slide={params}
```
Slides an element in and out.
`slide` accepts the following parameters:
L'animation de type `slide` permet de faire apparaître et disparaître un élément en glissant depuis et vers le haut.
- `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)
Les paramètres suivants peuvent être utilisés avec `slide` :
* `axis` (`x` | `y`, default `y`) — the axis of motion along which the transition occurs
* `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)
* `axis` (`x` | `y`, par défaut `y`) — l'axe de déplacement utilisé pour la transition
```svelte
<script>
@ -155,7 +155,7 @@ Slides an element in and out.
{#if condition}
<div transition:slide={{ delay: 250, duration: 300, easing: quintOut, axis: 'x' }}>
slides in and out horizontally
Apparaît et disparaît en glissant
</div>
{/if}
```
@ -176,15 +176,15 @@ in:scale={params}
out:scale={params}
```
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
{#if condition}
<div transition:scale={{ duration: 500, delay: 500, opacity: 0.5, start: 0.5, easing: quintOut }}>
scales in and out
Apparaît et disparaît avec un zoom
</div>
{/if}
```
@ -215,16 +215,16 @@ in:draw={params}
out:draw={params}
```
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.
- `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
- `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
- `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
- `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
</script>
{#if condition}
<h1 in:send={{ key }} out:receive={{ key }}>BIG ELEM</h1>
<h1 in:send={{ key }} out:receive={{ key }}>GROS ELEMENT</h1>
{:else}
<small in:send={{ key }} out:receive={{ key }}>small elem</small>
<small in:send={{ key }} out:receive={{ key }}>petit élément</small>
{/if}
```

@ -2,7 +2,7 @@
title: 'svelte/animate'
---
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
- `duration` (`number` | `function`, default `d => Math.sqrt(d) * 120`) — see below
- `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
* `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](/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).
```svelte
<script>

@ -2,22 +2,23 @@
title: 'svelte/easing'
---
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 <span class="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).
| ease | in | out | inOut |
| ----------- | ----------- | ------------ | -------------- |
| **back** | `backIn` | `backOut` | `backInOut` |
| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` |
| **circ** | `circIn` | `circOut` | `circInOut` |
| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` |
| ease | in | out | inOut |
| --- | --- | --- | --- |
| **back** | `backIn` | `backOut` | `backInOut` |
| **bounce** | `bounceIn` | `bounceOut` | `bounceInOut` |
| **circ** | `circIn` | `circOut` | `circInOut` |
| **cubic** | `cubicIn` | `cubicOut` | `cubicInOut` |
| **elastic** | `elasticIn` | `elasticOut` | `elasticInOut` |
| **expo** | `expoIn` | `expoOut` | `expoInOut` |
| **quad** | `quadIn` | `quadOut` | `quadInOut` |
| **quart** | `quartIn` | `quartOut` | `quartInOut` |
| **quint** | `quintIn` | `quintOut` | `quintInOut` |
| **sine** | `sineIn` | `sineOut` | `sineInOut` |
| **expo** | `expoIn` | `expoOut` | `expoInOut` |
| **quad** | `quadIn` | `quadOut` | `quadInOut` |
| **quart** | `quartIn` | `quartOut` | `quartInOut` |
| **quint** | `quintIn` | `quintOut` | `quintInOut` |
| **sine** | `sineIn` | `sineOut` | `sineInOut` |
<!-- TODO -->

@ -2,18 +2,18 @@
title: svelte/action
---
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
<div use: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 <span class="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
/** @type {import('svelte/action').Action<HTMLElement, string>} */
function foo(node, bar) {
// the node has been mounted in the DOM
// le noeud a été ajouté au DOM
return {
update(bar) {
// the value of `bar` has changed
// la valeur de `bar` a changé
},
destroy() {
// the node has been removed from the DOM
// le noeud a été supprimé du DOM
}
};
}
@ -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
* @type {import('svelte/action').Action<HTMLDivElement, { prop: any }, { 'on:emit': (e: CustomEvent<string>) => void }>}
*/
function foo(node, { prop }) {
// the node has been mounted in the DOM
// le noeud a été ajouté au DOM
//...LOGIC
//...LOGIQUE
node.dispatchEvent(new CustomEvent('emit', { detail: 'hello' }));
return {
destroy() {
// the node has been removed from the DOM
// le noeud a été supprimé du DOM
}
};
}

@ -1,14 +1,15 @@
/**
* Actions can return an object containing the two properties defined in this interface. Both are optional.
* - update: An action can have a parameter. This method will be called whenever that parameter changes,
* immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both
* mean that the action accepts no parameters.
* - destroy: Method that is called after the element is unmounted
* Les actions peuvent renvoyer un objet contenant les deux propriétés définies dans cette interface.
* Les deux sont optionnelles.
* - update: Une action peut avoir un paramètre. Cette méthode est appelée à chaque fois que ce paramètre change,
* juste après que Svelte ait appliqué les mises à jour au <span class="vo">[markup](/docs/web#markup)</span>.
* `ActionReturn` et `ActionReturn<undefined>` signifient toutes les deux que l'action n'accepte pas de paramètre.
* - destroy: Méthode qui est appelée après la destruction de l'élément
*
* Additionally, you can specify which additional attributes and events the action enables on the applied element.
* This applies to TypeScript typings only and has no effect at runtime.
* De plus, vous pouvez spécifier quels attributs et évènements additionnels l'action apporte à l'élément sur lequel elle est appliquée.
* Ceci n'a d'impact que sur les types Typescript et n'a pas d'effet au moment de l'exécution.
*
* Example usage:
* Exemple d'usage:
* ```ts
* interface Attributes {
* newprop?: string;
@ -41,19 +42,19 @@ export interface ActionReturn<
}
/**
* Actions are functions that are called when an element is created.
* You can use this interface to type such actions.
* The following example defines an action that only works on `<div>` elements
* and optionally accepts a parameter which it has a default value for:
* Les actions sont des fonctions exécutées lorsqu'un élément est créé.
* Vous pouvez utiliser cette interface pour les typer.
* L'exemple suivant définit une action qui ne fonctionne que pour les éléments `<div>`
* et accepte un paramètre optionnel qui a une valeur par défaut :
* ```ts
* export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => {
* // ...
* }
* ```
* `Action<HTMLDivElement>` and `Action<HTMLDiveElement, undefined>` both signal that the action accepts no parameters.
* `Action<HTMLDivElement>` and `Action<HTMLDiveElement, undefined>` indiquent tous les deux que l'action n'accepte pas de paramètre.
*
* You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
* See interface `ActionReturn` for more details.
* Une action peut renvoyer un objet avec les méthodes `update` et `destroy`, et vous pouvez typer quels attributs et évènements elle apporte.
* Voir l'interface `ActionReturn` pour plus de détails.
*
* Docs: https://svelte.dev/docs/svelte-action
*/

Loading…
Cancel
Save