You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/03-runtime/04-svelte-transition.md
+58-58Lines changed: 58 additions & 58 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: 'svelte/transition'
3
3
---
4
4
5
-
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).
5
+
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.
6
6
7
7
## `fade`
8
8
@@ -20,23 +20,23 @@ in:fade={params}
20
20
out:fade={params}
21
21
```
22
22
23
-
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.
23
+
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`.
24
24
25
-
`fade` accepts the following parameters:
25
+
Les paramètres suivants peuvent être utilisés avec `fade`:
26
26
27
-
-`delay` (`number`, default 0) — milliseconds before starting
28
-
-`duration` (`number`, default 400) — milliseconds the transition lasts
29
-
-`easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
27
+
*`delay` (`number`, par défaut 0) - millisecondes avant le démarrage
28
+
*`duration` (`number`, par défaut 400) - durée de la transition en millisecondes
29
+
*`easing` (`function`, par défaut `linear`) — une [fonction de lissage](/docs/svelte-easing)
30
30
31
-
You can see the `fade`transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/transition).
31
+
Un exemple de transition de type `fade`est présenté dans le [tutoriel relatif aux transitions](https://learn.svelte.dev/tutorial/transition).
32
32
33
33
```svelte
34
34
<script>
35
35
import { fade } from 'svelte/transition';
36
36
</script>
37
37
38
38
{#if condition}
39
-
<div transition:fade={{ delay: 250, duration: 300 }}>fades in and out</div>
39
+
<div transition:fade={{ delay: 250, duration: 300 }}>Apparaît et disparaît en s'estompant</div>
40
40
{/if}
41
41
```
42
42
@@ -56,23 +56,23 @@ in:blur={params}
56
56
out:blur={params}
57
57
```
58
58
59
-
Animates a `blur` filter alongside an element's opacity.
59
+
Anime le filtre de flou (`blur`) en même temps que l'opacité d'un élément.
60
60
61
-
`blur` accepts the following parameters:
61
+
Les paramètres suivants peuvent être utilisés avec `blur`:
62
62
63
-
-`delay` (`number`, default 0) — milliseconds before starting
64
-
-`duration` (`number`, default 400) — milliseconds the transition lasts
65
-
-`easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
66
-
-`opacity` (`number`, default 0) - the opacity value to animate out to and in from
67
-
-`amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is`px`
63
+
*`delay` (`number`, par défaut 0) - millisecondes avant le démarrage
64
+
*`duration` (`number`, par défaut 400) - durée de la transition en millisecondes
65
+
*`easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
66
+
*`opacity` (`number`, par défaut 0) - opacité cible de l'animation
67
+
*`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`.
68
68
69
69
```svelte
70
70
<script>
71
71
import { blur } from 'svelte/transition';
72
72
</script>
73
73
74
74
{#if condition}
75
-
<div transition:blur={{ amount: 10 }}>fades in and out</div>
75
+
<div transition:blur={{ amount: 10 }}>Apparaît et disparaît avec un flou</div>
76
76
{/if}
77
77
```
78
78
@@ -92,19 +92,20 @@ in:fly={params}
92
92
out:fly={params}
93
93
```
94
94
95
-
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.
95
+
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.
96
96
97
-
`fly` accepts the following parameters:
97
+
Les paramètres suivants peuvent être utilisés avec `fly`:
98
98
99
-
-`delay` (`number`, default 0) — milliseconds before starting
100
-
-`duration` (`number`, default 400) — milliseconds the transition lasts
101
-
-`easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
102
-
-`x` (`number | string`, default 0) - the x offset to animate out to and in from
103
-
-`y` (`number | string`, default 0) - the y offset to animate out to and in from
104
-
-`opacity` (`number`, default 0) - the opacity value to animate out to and in from
99
+
*`delay` (`number`, par défaut 0) - millisecondes avant le démarrage
100
+
*`duration` (`number`, par défaut 400) - durée de la transition en millisecondes
101
+
*`easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
102
+
*`x` (`number | string`, par défaut 0) - décalage horizontal de l'animation
103
+
*`y` (`number | string`, par défaut 0) - décalage vertical de l'animation
104
+
*`opacity` (`number`, par défaut 0) - opacité cible de l'animation
105
105
106
-
x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
107
-
You can see the `fly` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/adding-parameters-to-transitions).
106
+
x et y utilisent `px` par défaut mais supportent les unités CSS, par exemple `x: '100vw'` ou `y: '50%'`.
107
+
108
+
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).
108
109
109
110
```svelte
110
111
<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.
179
+
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.
180
180
181
-
`scale` accepts the following parameters:
181
+
Les paramètres suivants peuvent être utilisés avec `scale`:
182
182
183
-
-`delay` (`number`, default 0) — milliseconds before starting
184
-
-`duration` (`number`, default 400) — milliseconds the transition lasts
185
-
-`easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
186
-
-`start` (`number`, default 0) - the scale value to animate out to and in from
187
-
-`opacity` (`number`, default 0) - the opacity value to animate out to and in from
183
+
*`delay` (`number`, par défaut 0) - millisecondes avant le démarrage
184
+
*`duration` (`number`, par défaut 400) - durée de la transition en millisecondes
185
+
*`easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
186
+
*`start` (`number`, par défaut 0) - ratio d'agrandissement de l'animation
187
+
*`opacity` (`number`, par défaut 0) - opacité cible de l'animation
188
188
189
189
```svelte
190
190
<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>`.
218
+
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>`.
219
219
220
-
`draw` accepts the following parameters:
220
+
Les paramètres suivants peuvent être utilisés avec `draw`:
221
221
222
-
-`delay` (`number`, default 0) — milliseconds before starting
223
-
-`speed` (`number`, default undefined) - the speed of the animation, see below.
-`easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
222
+
*`delay` (`number`, par défaut 0) - millisecondes avant le démarrage
223
+
*`speed` (`number`, par défaut undefined) - vitesse de l'animation, voir ci-dessous.
224
+
*`duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
225
+
*`easing` (`function`, par défaut `cubicInOut`) — une [fonction de lissage](/docs/svelte-easing)
226
226
227
-
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.
227
+
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.
228
228
229
229
```svelte
230
230
<script>
@@ -250,14 +250,14 @@ The `speed` parameter is a means of setting the duration of the transition relat
250
250
251
251
> EXPORT_SNIPPET: svelte/transition#crossfade
252
252
253
-
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.
253
+
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.
254
254
255
-
`crossfade` accepts the following parameters:
255
+
Les paramètres suivants peuvent être utilisés avec `crossfade`:
256
256
257
-
-`delay` (`number`, default 0) — milliseconds before starting
-`easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
260
-
-`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.
257
+
*`delay` (`number`, par défaut 0) - millisecondes avant le démarrage
258
+
*`duration` (`number` | `function`, par défaut 800) - durée de la transition en millisecondes
259
+
*`easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
260
+
*`fallback` (`function`) — une [transition](/docs/element-directives#transition-fn)de secours à utiliser lorsqu'il n'y a pas d'élément "reçu" correspondant.
261
261
262
262
```svelte
263
263
<script>
@@ -271,9 +271,9 @@ The `crossfade` function creates a pair of [transitions](/docs/element-directive
Copy file name to clipboardExpand all lines: documentation/docs/03-runtime/05-svelte-animate.md
+11-10Lines changed: 11 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
title: 'svelte/animate'
3
3
---
4
4
5
-
The `svelte/animate`module exports one function for use with Svelte [animations](/docs/element-directives#animate-fn).
5
+
Le module `svelte/animate`exporte une fonction à utiliser avec les [animations](/docs/element-directives#animate-fn) Svelte.
6
6
7
7
## `flip`
8
8
@@ -12,20 +12,21 @@ The `svelte/animate` module exports one function for use with Svelte [animations
12
12
animate:flip={params}
13
13
```
14
14
15
-
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/).
15
+
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).
16
16
17
-
`flip` accepts the following parameters:
17
+
Les paramètres suivants peuvent être utilisés avec `flip`:
18
18
19
-
-`delay` (`number`, default 0) — milliseconds before starting
*`easing` (`function`, par défaut `cubicOut`) — une [fonction de lissage](/docs/svelte-easing)
22
22
23
-
`duration` can be provided as either:
24
23
25
-
- a `number`, in milliseconds.
26
-
- 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.
24
+
Le paramètre de durée `duration` peut être:
27
25
28
-
You can see a full example on the [animations tutorial](https://learn.svelte.dev/tutorial/animate).
26
+
- soit un nombre, en millisecondes.
27
+
- 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.
28
+
29
+
Un exemple complet est présenté dans le [tutoriel relatif aux animations](https://learn.svelte.dev/tutorial/animate).
Copy file name to clipboardExpand all lines: documentation/docs/03-runtime/06-svelte-easing.md
+14-13Lines changed: 14 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -2,22 +2,23 @@
2
2
title: 'svelte/easing'
3
3
---
4
4
5
-
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`.
5
+
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`.
6
6
7
-
You can explore the various eases using the [ease visualiser](/examples/easing)in the [examples section](/examples).
7
+
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).
0 commit comments