Traduction `transitions.md` #47

forresst · 2017-03-30T16:34:13Z

Cette page est en cours de traduction.

MachinisteWeb · 2017-04-22T16:00:52Z

Dis nous quand tu es prèt pour la review ;)

MachinisteWeb · 2017-05-04T06:33:51Z

Transition a été mis à jour « Toggle » devient « Toggle Render », n'oubli pas de faire le changement.

MachinisteWeb · 2017-05-10T11:44:31Z

Actuellement transition.md est le prochain fichier à traduire pour lire le guide en FR

Il faut mettre à jour ta version de travail @forresst vis à vis de la master.

Tu as besoin d'aide ?

MachinisteWeb · 2017-05-18T07:08:33Z

@forresst est tu parmis nous :)

forresst · 2017-05-18T09:56:23Z

Oui "toujours vivant, rassurez-vous", mais très peu dispo en ce moment. Désolé, j'espère une fin de mois plus calme.

MachinisteWeb · 2017-06-02T11:08:36Z

Ça avance :)

forresst · 2017-06-02T11:24:13Z

Oui, j'ai un peu plus de disponibilité, mais j'ai encore au moins 50% à faire. Désolé !

forresst · 2017-06-06T08:24:37Z

J'ai encore une relecture générale à faire et vous pourrez commencer la relecture. Je vous tiens au courant.

forresst · 2017-06-06T09:26:54Z

Traduction terminée, merci pour vos relectures

MachinisteWeb

Pas énormément de fautes. Belle review. J'ai laissé mes commentaires. Je te laisse traiter ce qui fait du sens et me faire des retours sur ce qui t'ennui.

Bien joué !

MachinisteWeb · 2017-06-02T11:07:36Z

src/v2/guide/transitions.md

@@ -1486,7 +1486,7 @@ Vue.component('my-special-transition', {
  render: function (createElement, context) {
    var data = {
      props: {
-        name: 'very-special-transition',
+        name: 'very-special-transition'


remettre la virgule :)

MachinisteWeb · 2017-06-12T10:34:46Z

src/v2/guide/transitions.md


-Vue provides a `transition` wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:
+Vue fournit un composant conteneur `transition`, vous permettant d’ajouter des transitions entrantes/sortantes pour n’importe quel élément ou composant dans les contextes suivants :


d'ajouter

(apostrophe simple)

n'importe

(apostrophe simple)

MachinisteWeb · 2017-06-12T11:16:50Z

src/v2/guide/transitions.md


-2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
+2. `v-enter-active`: C'est l'état actif pour *enter*. Il est appliqué pendant toute la phase *enter*. Il est ajouté avant que l'élément soit inséré, il est supprimé lorsque la transition/animation est terminée. Cette classe peut être utilisée pour définir la durée, le retard et la courbe d’accélération pour la transition entrante (enter).


d'accélération

(apostrophe)

enter fait le job, on peut retirer (enter)

MachinisteWeb · 2017-06-12T11:18:00Z

src/v2/guide/transitions.md


-4. `v-leave`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
+4. `v-leave`: C'est l'état de départ pour *leave*. Il est ajouté dès qu'une transition sortante (leave) est déclenchée, il est supprimé une fois faite.


supprimé après une frame.

leave fait le job, on peut retirer (leave)

MachinisteWeb · 2017-06-12T11:19:35Z

src/v2/guide/transitions.md


-`v-enter-active` and `v-leave-active` give you the ability to specify different easing curves for enter/leave transitions, which you'll see an example of in the following section.
+`v-enter-active` et `v-leave-active` vous donne la possibilité de spécifier des courbes d’accélération pour les transitions enter/leave, nous allons les voir dans un exemple dans la section suivante.


transitions entrante/sortante

MachinisteWeb · 2017-06-12T11:46:39Z

src/v2/guide/transitions.md


-<p class="tip">When toggling between elements that have **the same tag name**, you must tell Vue that they are distinct elements by giving them unique `key` attributes. Otherwise, Vue's compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, **it's considered good practice to always key multiple items within a `<transition>` component.**</p>
+<p class="tip">Lors de la permutation entre des éléments qui ont **le même nom de balise**, vous devez indiquer à Vue qu’ils sont des éléments distincts en lui donnant des attributs `key` uniques.  Sinon, le compilateur de Vue ne remplacera que le contenu de l'élément dans le but d'être efficace. Cependant, même si c'est techniquement inutile, **c'est considéré comme une bonne pratique de toujours avoir une clé pour chaque élément dans un composant `<transition>`.**</p>


qu'il

(apostrophe)

MachinisteWeb · 2017-06-12T11:47:14Z

src/v2/guide/transitions.md

  </button>
 </transition>
 ```

-In these cases, you can also use the `key` attribute to transition between different states of the same element. Instead of using `v-if` and `v-else`, the above example could be rewritten as:
+Dans ces cas, vous pouvez aussi utiliser l'attribut `key` pour effectuer une transition entre différents états du même élément. Au lieu d’utiliser `v-if` et `v-else`, l’exemple ci-dessus pourrait être réécrit ainsi :


l'exemple

(apostrophe)

MachinisteWeb · 2017-06-12T11:48:39Z

src/v2/guide/transitions.md


-The `in-out` mode isn't used as often, but can sometimes be useful for a slightly different transition effect. Let's try combining it with the slide-fade transition we worked on earlier:
+Le mode `in-out` n’est pas utilisé aussi souvent, mais peut parfois être utile pour un effet de transition un peu différent. Essayons de le combiner avec la transition diapositive sur laquelle nous avons travaillé précédemment.


n'est

(apostrophe)

MachinisteWeb · 2017-06-12T11:52:37Z

src/v2/guide/transitions.md

@@ -1238,16 +1238,16 @@ new Vue({
 </style>
 {% endraw %}

-<p class="tip">One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use `display: inline-block` or place elements in a flex context.</p>
+<p class="tip">Un point important à noter, c'est que ces transitions FLIP ne fonctionnent pas si des éléments sont configurés avec `display: inline`. Comme alternative, vous pouvez utiliser `display: inline-block` ou placer des éléments dans un contexte flexible.</p>


Un point important à noter est que

ou

Un point important est a noter : ces transitions FLIP

MachinisteWeb · 2017-06-12T11:53:05Z

src/v2/guide/transitions.md

@@ -1303,9 +1303,9 @@ new Vue({
 </style>
 {% endraw %}

-### Staggering List Transitions
+### Echelonnage des transitions de liste


Échelonnage

MachinisteWeb · 2017-06-15T07:18:54Z

Petites modifs pour moi @forresst :)

forresst · 2017-06-16T08:41:11Z

@haeresis Done

sylvainpolletvillard

Seconde relecture

sylvainpolletvillard · 2017-06-16T08:56:57Z

src/v2/guide/transitions.md


-3. If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue's concept of `nextTick`).
+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`).


à la frame suivante

sylvainpolletvillard · 2017-06-16T09:00:15Z

src/v2/guide/transitions.md


-`v-enter-active` and `v-leave-active` give you the ability to specify different easing curves for enter/leave transitions, which you'll see an example of in the following section.
+`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.


vous donnent

ce que nous verrons en exemple dans la section suivante.

sylvainpolletvillard · 2017-06-16T09:04:03Z

src/v2/guide/transitions.md

-  // the done callback is optional when
-  // used in combination with CSS
+  // la fonction de rappel done est facultative quand
+  // c'est utilisé en combinaison avec du CSS


quand utilisée

sylvainpolletvillard · 2017-06-16T09:04:18Z

src/v2/guide/transitions.md

-  // the done callback is optional when
-  // used in combination with CSS
+  // la fonction de rappel done est facultative quand
+  // c'est utilisé en combinaison avec du CSS


quand utilisée

sylvainpolletvillard · 2017-06-16T09:08:34Z

src/v2/guide/transitions.md

@@ -693,9 +693,9 @@ new Vue({
 </style>
 {% endraw %}

-As it's transitioning between the "on" button and the "off" button, both buttons are rendered - one transitioning out while the other transitions in. This is the default behavior of `<transition>` - entering and leaving happens simultaneously.
+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).


les deux boutons sont rendus - l'un est en transition sortante pendant que l'autre est en transition entrante

sylvainpolletvillard · 2017-06-16T09:14:22Z

src/v2/guide/transitions.md


- `in-out`: New element transitions in first, then when complete, the current element transitions out.
+- `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.


(note: transitions n'est ici pas le nom pluriel mais la conjugaison du verbe to transition, "transitionner" en français. C'est un néologisme mais on peut se débrouiller pour ne pas l'utiliser)

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

Merci j'avoue avoir eu du mal à traduire cette partie. Avec ton explication cela devient limpide.

sylvainpolletvillard · 2017-06-16T09:15:05Z

src/v2/guide/transitions.md


- `out-in`: Current element transitions out first, then when complete, the new element transitions in.
+- `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.


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

sylvainpolletvillard · 2017-06-16T09:22:37Z

src/v2/guide/transitions.md


 ```html
 <transition v-bind:name="transitionName">
  <!-- ... -->
 </transition>
 ```

-This can be useful when you've defined CSS transitions/animations using Vue's transition class conventions and simply want to switch between them.
+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.


sylvainpolletvillard · 2017-06-16T09:25:29Z

src/v2/guide/transitions.md


-Really though, any transition attribute can be dynamically bound. And it's not just attributes. Since event hooks are just methods, they have access to any data in the context. That means depending on the state of your component, your JavaScript transitions can behave differently.
+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.


Really through =>En vérité / En réalité

Et il ne s'agit pas seulement des attributs

, vos transitions JavaScript peuvent

sylvainpolletvillard · 2017-06-16T09:28:44Z

src/v2/guide/transitions.md

@@ -1645,5 +1645,4 @@ new Vue({
 </script>
 {% endraw %}

-Finally, the ultimate way of creating dynamic transitions is through components that accept props to change the nature of the transition(s) to be used. It may sound cheesy, but the only limit really is your imagination.
-
+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.


de ou des transitions à utiliser

cheesy => "mielleux" dans ce contexte ?

Génial le « mielleux ». »

forresst · 2017-06-16T10:50:59Z

@sylvainpolletvillard Done

sylvainpolletvillard · 2017-06-16T12:18:18Z

2 relectures OK, bon pour merge

Traduction transitions.md

35bbcc7

forresst added the Traduction en cours label Mar 30, 2017

MachinisteWeb assigned forresst Mar 31, 2017

Traduction transitions.md (2)

5b3b9c9

MachinisteWeb mentioned this pull request Apr 6, 2017

Pages en cours de traduction #3

Open

MachinisteWeb mentioned this pull request May 5, 2017

Pages en cours de traduction vuejs-fr/vue-ssr-docs#2

Open

forresst added 2 commits June 2, 2017 09:22

Merge branch 'master' into translate-transitions

e24e6d2

Traduction transitions.md (3)

e1f3696

MachinisteWeb added Relecture nécessaire and removed Traduction en cours labels Jun 2, 2017

MachinisteWeb requested review from MachinisteWeb, sylvainpolletvillard and Kocal and removed request for sylvainpolletvillard, Kocal and MachinisteWeb June 2, 2017 11:06

MachinisteWeb added Traduction en cours and removed Relecture nécessaire labels Jun 2, 2017

Traduction transitions.md (4)

fd04405

Traduction transitions.md (5)

e098027

forresst added Relecture nécessaire and removed Traduction en cours labels Jun 6, 2017

forresst requested review from Kocal, sylvainpolletvillard, MachinisteWeb and yann-yinn June 6, 2017 09:27

MachinisteWeb requested changes Jun 12, 2017

View reviewed changes

MachinisteWeb changed the title ~~Traduction transitions.md~~ Traduction transitions.md Jun 12, 2017

A la suite de la 1er relecture de Haeresis

77fd515

MachinisteWeb approved these changes Jun 16, 2017

View reviewed changes

sylvainpolletvillard requested changes Jun 16, 2017

View reviewed changes

A la suite de la 1er relecture de sylvainpolletvillard

62424b6

sylvainpolletvillard approved these changes Jun 16, 2017

View reviewed changes

sylvainpolletvillard merged commit bbbef6a into vuejs-fr:master Jun 16, 2017

sylvainpolletvillard added Validé and removed Relecture nécessaire labels Jun 16, 2017

forresst deleted the translate-transitions branch June 16, 2017 13:49


		Vue provides a `transition` wrapper component, allowing you to add entering/leaving transitions for any element or component in the following contexts:
		Vue fournit un composant conteneur `transition`, vous permettant d’ajouter des transitions entrantes/sortantes pour n’importe quel élément ou composant dans les contextes suivants :


		2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
		2. `v-enter-active`: C'est l'état actif pour enter. Il est appliqué pendant toute la phase enter. Il est ajouté avant que l'élément soit inséré, il est supprimé lorsque la transition/animation est terminée. Cette classe peut être utilisée pour définir la durée, le retard et la courbe d’accélération pour la transition entrante (enter).


		4. `v-leave`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
		4. `v-leave`: C'est l'état de départ pour leave. Il est ajouté dès qu'une transition sortante (leave) est déclenchée, il est supprimé une fois faite.


		`v-enter-active` and `v-leave-active` give you the ability to specify different easing curves for enter/leave transitions, which you'll see an example of in the following section.
		`v-enter-active` et `v-leave-active` vous donne la possibilité de spécifier des courbes d’accélération pour les transitions enter/leave, nous allons les voir dans un exemple dans la section suivante.


		<p class="tip">When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique `key` attributes. Otherwise, Vue's compiler will only replace the content of the element for efficiency. Even when technically unnecessary though, it's considered good practice to always key multiple items within a `<transition>` component.</p>
		<p class="tip">Lors de la permutation entre des éléments qui ont le même nom de balise, vous devez indiquer à Vue qu’ils sont des éléments distincts en lui donnant des attributs `key` uniques. Sinon, le compilateur de Vue ne remplacera que le contenu de l'élément dans le but d'être efficace. Cependant, même si c'est techniquement inutile, c'est considéré comme une bonne pratique de toujours avoir une clé pour chaque élément dans un composant `<transition>`.</p>


		The `in-out` mode isn't used as often, but can sometimes be useful for a slightly different transition effect. Let's try combining it with the slide-fade transition we worked on earlier:
		Le mode `in-out` n’est pas utilisé aussi souvent, mais peut parfois être utile pour un effet de transition un peu différent. Essayons de le combiner avec la transition diapositive sur laquelle nous avons travaillé précédemment.


		3. If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue's concept of `nextTick`).
		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`).


		- `in-out`: New element transitions in first, then when complete, the current element transitions out.
		- `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.


		- `out-in`: Current element transitions out first, then when complete, the new element transitions in.
		- `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.


		Really though, any transition attribute can be dynamically bound. And it's not just attributes. Since event hooks are just methods, they have access to any data in the context. That means depending on the state of your component, your JavaScript transitions can behave differently.
		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.

Traduction transitions.md #47

Traduction transitions.md #47

Conversation

forresst commented Mar 30, 2017

MachinisteWeb commented Apr 22, 2017

MachinisteWeb commented May 4, 2017

MachinisteWeb commented May 10, 2017 • edited Loading

MachinisteWeb commented May 18, 2017

forresst commented May 18, 2017

MachinisteWeb commented Jun 2, 2017

forresst commented Jun 2, 2017

forresst commented Jun 6, 2017

forresst commented Jun 6, 2017

MachinisteWeb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb commented Jun 15, 2017

forresst commented Jun 16, 2017

sylvainpolletvillard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

forresst commented Jun 16, 2017

sylvainpolletvillard commented Jun 16, 2017

Traduction `transitions.md` #47

Traduction `transitions.md` #47

MachinisteWeb commented May 10, 2017 •

edited

Loading