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: src/v2/guide/transitions.md
+10-10
Original file line number
Diff line number
Diff line change
@@ -88,7 +88,7 @@ Quand un élément, encapsulé dans un composant `transition`, est inséré ou e
88
88
89
89
2. Si le composant de transition possède des [hooks JavaScript](#Hooks-JavaScript), ces hooks seront appelés aux moments appropriés.
90
90
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`).
92
92
93
93
### Classes de transition
94
94
@@ -110,7 +110,7 @@ Il y a six classes appliquées pour les transitions entrantes/sortantes.
110
110
111
111
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`.
112
112
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.
114
114
115
115
### Transitions CSS
116
116
@@ -403,7 +403,7 @@ methods: {
403
403
// ...
404
404
},
405
405
// 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
407
407
enter:function (el, done) {
408
408
// ...
409
409
done()
@@ -423,7 +423,7 @@ methods: {
423
423
// ...
424
424
},
425
425
// 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
427
427
leave:function (el, done) {
428
428
// ...
429
429
done()
@@ -693,7 +693,7 @@ new Vue({
693
693
</style>
694
694
{% endraw %}
695
695
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).
697
697
698
698
Parfois, cela fonctionne très bien, comme lorsque des éléments de transition sont absolument positionnés l'un sur l'autre :
699
699
@@ -783,9 +783,9 @@ new Vue({
783
783
784
784
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 :
785
785
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.
787
787
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.
789
789
790
790
Maintenant, mettons à jour la transition pour nos boutons on/off avec `out-in` :
791
791
@@ -1513,9 +1513,9 @@ Oui, même les transitions dans Vue sont pilotées par les données ! Le plus si
1513
1513
</transition>
1514
1514
```
1515
1515
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.
1517
1517
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.
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