docs: 03-transition (#25)

* docs: 03-transition

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

---------

Co-authored-by: Romain Crestey <[email protected]>

Author: bleucitron

documentation/docs/03-runtime/04-svelte-transition.md

@@ -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,23 +20,23 @@ 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>
 	import { fade } from 'svelte/transition';
 </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,23 +56,23 @@ 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>
 	import { blur } from 'svelte/transition';
 </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}
 ```
 

documentation/docs/03-runtime/05-svelte-animate.md

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

documentation/docs/03-runtime/06-svelte-easing.md

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