Skip to content

Commit 62424b6

Browse files
committed
A la suite de la 1er relecture de sylvainpolletvillard
1 parent 77fd515 commit 62424b6

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

src/v2/guide/transitions.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ Quand un élément, encapsulé dans un composant `transition`, est inséré ou e
8888

8989
2. Si le composant de transition possède des [hooks JavaScript](#Hooks-JavaScript), ces hooks seront appelés aux moments appropriés.
9090

91-
3. Si aucune transition/animation CSS n'est détectée et qu'aucun hook JavaScript n'est fourni, les opérations du DOM pour l'insertion et/ou la suppression seront exécutées immédiatement sur la frame suivante (Remarque : il s'agit d'une frame d'animation du navigateur, différente du concept de `nextTick`).
91+
3. Si aucune transition/animation CSS n'est détectée et qu'aucun hook JavaScript n'est fourni, les opérations du DOM pour l'insertion et/ou la suppression seront exécutées immédiatement à la frame suivante (Remarque : il s'agit d'une frame d'animation du navigateur, différente du concept de `nextTick`).
9292

9393
### Classes de transition
9494

@@ -110,7 +110,7 @@ Il y a six classes appliquées pour les transitions entrantes/sortantes.
110110

111111
Chacune de ces classes sera préfixée avec le nom de la transition. Ici le préfixe `v-` est celui par défaut lorsque vous utilisez l'élément `<transition>` sans nom. Si vous utilisez par exemple `<transition name="ma-transition">`, alors la classe `v-enter` sera nommé `ma-transition-enter`.
112112

113-
`v-enter-active` et `v-leave-active` vous donne la possibilité de spécifier des courbes d'accélération pour les transitions entrantes/sortantes, nous allons les voir dans un exemple dans la section suivante.
113+
`v-enter-active` et `v-leave-active` vous donnent la possibilité de spécifier des courbes d'accélération pour les transitions entrantes/sortantes, ce que nous verrons en exemple dans la section suivante.
114114

115115
### Transitions CSS
116116

@@ -403,7 +403,7 @@ methods: {
403403
// ...
404404
},
405405
// la fonction de rappel done est facultative quand
406-
// c'est utilisé en combinaison avec du CSS
406+
// utilisée en combinaison avec du CSS
407407
enter: function (el, done) {
408408
// ...
409409
done()
@@ -423,7 +423,7 @@ methods: {
423423
// ...
424424
},
425425
// la fonction de rappel done est facultative quand
426-
// c'est utilisé en combinaison avec du CSS
426+
// utilisée en combinaison avec du CSS
427427
leave: function (el, done) {
428428
// ...
429429
done()
@@ -693,7 +693,7 @@ new Vue({
693693
</style>
694694
{% endraw %}
695695

696-
Comme c'est une transition entre le bouton « on » et le bouton « off », les deux boutons sont rendus (La transition en fait apparaître un pendant qu'elle fait disparaître l'autre). Il s'agit du comportement par défaut de `<transition>` (l'entrée et la sortie se font simultanément).
696+
Comme c'est une transition entre le bouton « on » et le bouton « off », les deux boutons sont rendus (l'un est en transition sortante pendant que l'autre est en transition entrante). Il s'agit du comportement par défaut de `<transition>` (l'entrée et la sortie se font simultanément).
697697

698698
Parfois, cela fonctionne très bien, comme lorsque des éléments de transition sont absolument positionnés l'un sur l'autre :
699699

@@ -783,9 +783,9 @@ new Vue({
783783

784784
Les transitions simultanées d'entrée et de sortie ne sont pas toujours désirées, donc Vue propose des **modes de transition** alternatifs :
785785

786-
- `in-out`: Les transitions du nouvel élément se passent en premier, puis quand elles sont terminées, les transitions de l'élément actuel s'effectuent.
786+
- `in-out`: La transition entrante du nouvel élément s'effectue en premier, puis une fois terminée, déclenche la transition sortante de l'élément courant.
787787

788-
- `out-in`: Les transitions de l'élément actuel se passent en premier, puis quand elles sont terminées, les transitions du nouvel élément s'effectuent.
788+
- `out-in`: La transition sortante de l'élément courant s'effectue en premier, puis une fois terminée, déclenche la transition entrante du nouvel élément.
789789

790790
Maintenant, mettons à jour la transition pour nos boutons on/off avec `out-in` :
791791

@@ -1513,9 +1513,9 @@ Oui, même les transitions dans Vue sont pilotées par les données ! Le plus si
15131513
</transition>
15141514
```
15151515

1516-
Cela peut être utile quand vous avez défini des transitions/animations CSS à l'aide des conventions de classe de transition de Vue et que vous souhaitez simplement basculer entre elles.
1516+
Cela peut être utile quand vous avez défini des transitions/animations CSS à l'aide des conventions de classes de transition de Vue et que vous souhaitez simplement basculer entre elles.
15171517

1518-
Vraiment bien, tout attribut de transition peut être dynamiquement lié. Et ce ne sont pas seulement des attributs. Étant donné que les hooks d'événements ne sont que des méthodes, ils ont accès à toutes les données dans le contexte. Cela signifie que selon l'état de votre composant, le JavaScript de vos transitions peuvent se comporter différemment.
1518+
En vérité, tout attribut de transition peut être dynamiquement lié. Et il ne s'agit pas seulement des attributs. Étant donné que les hooks d'événements ne sont que des méthodes, ils ont accès à toutes les données dans le contexte. Cela signifie que selon l'état de votre composant, vos transitions JavaScript peuvent se comporter différemment.
15191519

15201520
``` html
15211521
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
@@ -1645,4 +1645,4 @@ new Vue({
16451645
</script>
16461646
{% endraw %}
16471647

1648-
Finalement, le meilleur moyen de créer des transitions dynamiques, c'est par le biais de composants qui acceptent des props pour changer la nature de la transition(s) à utiliser. Cela peut sembler ringard, mais la seule limite est votre imagination.
1648+
Finalement, le meilleur moyen de créer des transitions dynamiques, c'est par le biais de composants qui acceptent des props pour changer la nature de ou des transitions à utiliser. Cela peut sembler mielleux, mais la seule limite est votre imagination.

0 commit comments

Comments
 (0)