From 35bbcc7d65d38cf80e7ec7bf3547a47f5381007a Mon Sep 17 00:00:00 2001 From: forresst Date: Sun, 5 Mar 2017 22:35:07 +0100 Subject: [PATCH 1/7] Traduction transitions.md --- src/v2/guide/transitions.md | 155 ++++++++++++++++++------------------ 1 file changed, 78 insertions(+), 77 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index dc8829f701..0729ef1899 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -1,38 +1,38 @@ --- -title: Transition Effects +title: Effets de transition type: guide order: 13 --- -## Overview +## Vue d'ensemble -

**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**

Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to: +Vue fournit plusieurs façons d'appliquer des effets de transition lorsque des éléments sont insérés, mis à jour ou supprimés du DOM. Cela inclut des outils pour : -- automatically apply classes for CSS transitions and animations -- integrate 3rd-party CSS animation libraries, such as Animate.css -- use JavaScript to directly manipulate the DOM during transition hooks -- integrate 3rd-party JavaScript animation libraries, such as Velocity.js +- appliquer automatiquement des classes pour les transitions et les animations CSS +- intégrer des bibliothèques d'animation CSS tierces, comme Animate.css +- utiliser JavaScript pour manipuler directement le DOM durant les hooks de transition +- intégrer des bibliothèques d'animation JavaScript tierces, comme Velocity.js -On this page, we'll only cover entering, leaving, and list transitions, but you can see the next section for [managing state transitions](transitioning-state.html). +Sur cette page, nous ne traiterons que des transitions d'entrée (enter), de sortie (leave) et de liste, mais vous pouvez consulter la section suivante pour la [gestion des transitions d'état](transitioning-state.html). -## Transitioning Single Elements/Components +## Transition d'éléments/composants simples -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 d’entrée/sortie pour n’importe quel élément ou composant dans les contextes suivants : -- Conditional rendering (using `v-if`) -- Conditional display (using `v-show`) -- Dynamic components -- Component root nodes +- Le rendu conditionnel (en utilisant `v-if`) +- L'affichage conditionnel (en utilisant `v-show`) +- Les composants dynamiques +- Les nœuds racine de composant -This is what a very simple example looks like in action: +Voilà à quoi ressemble un exemple très simple en action : ``` html
-

hello

+

bonjour
``` @@ -58,10 +58,10 @@ new Vue({ {% raw %}
-

hello

+

bonjour
{% endraw %} -### Custom Transition Classes +### Classes de transition personnalisées -You can also specify custom transition classes by providing the following attributes: +Vous pouvez également spécifier des classes de transition personnalisées en fournissant les attributs suivants : - `enter-class` - `enter-active-class` -- `enter-to-class` (>= 2.1.8 only) +- `enter-to-class` (>= 2.1.8 uniquement) - `leave-class` - `leave-active-class` -- `leave-to-class` (>= 2.1.8 only) +- `leave-to-class` (>= 2.1.8 uniquement) -These will override the conventional class names. This is especially useful when you want to combine Vue's transition system with an existing CSS animation library, such as [Animate.css](https://daneden.github.io/animate.css/). +Celles-ci remplacent les noms de classes habituelles. C'est surtout utile quand vous voulez combiner le système de transition de Vue avec une bibliothèque d'animation CSS existante, comme [Animate.css](https://daneden.github.io/animate.css/). -Here's an example: +Voici un exemple : ``` html
-

hello

+

bonjour
``` @@ -367,14 +367,14 @@ new Vue({
-

hello

+

bonjour
{% endraw %} -### Using Transitions and Animations Together +### Utilisation à la fois des transitions et des animations + -Vue needs to attach event listeners in order to know when a transition has ended. It can either be `transitionend` or `animationend`, depending on the type of CSS rules applied. If you are only using one or the other, Vue can automatically detect the correct type. +Vue a besoin d'attacher des écouteurs d’événements pour savoir quand une transition est terminée. Cela peut être `transitionend` ou `animationend`, selon le type de règles CSS appliquées. Si vous utilisez seulement l'une ou l’autre, Vue peut automatiquement découvrir le type correct. -However, in some cases you may want to have both on the same element, for example having a CSS animation triggered by Vue, along with a CSS transition effect on hover. In these cases, you will have to explicitly declare the type you want Vue to care about in a `type` attribute, with a value of either `animation` or `transition`. +Toutefois, dans certains cas vous pouvez les avoir à la fois sur le même élément, par exemple avoir une animation de CSS déclenchée par Vue, ainsi qu'un effet de transition CSS lors du survol. Dans ces cas, vous devrez explicitement déclarer le type dont vous voulez que Vue se soucie dans un attribut `type`, avec une valeur à `animation` ou `transition`. -### Explicit Transition Durations +### Durées de transition explicites -> New in 2.2.0 +> Nouveau dans 2.2.0 -In most cases, Vue can automatically figure out when the transition has finished. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element. However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element. +Dans la plupart des cas, Vue peut automatiquement déterminer quand la transition est terminée. Par défaut, Vue attend le premier événement `transitionend` ou `animationend` sur l’élément de transition racine. Cependant, cela peut ne pas toujours être souhaité (par exemple, nous pouvons avoir une séquence de transition chorégraphiée où certains éléments internes imbriqués ont une transition retardée ou une durée de transition plus longue que l’élément de transition racine). -In such cases you can specify an explicit transition duration (in milliseconds) using the `duration` prop on the `` component: +Dans ce cas, vous pouvez spécifier une durée de transition explicite (en millisecondes) en utilisant le prop `duration` sur le composant `` : ``` html ... ``` -You can also specify separate values for enter and leave durations: +Vous pouvez également spécifier des valeurs séparées pour les durées de *enter* et *leave* : ``` html ... ``` -### JavaScript Hooks +### *Hooks* JavaScript -You can also define JavaScript hooks in attributes: +Vous pouvez définir des *hooks* JavaScript dans les attributs : ``` html Date: Fri, 31 Mar 2017 13:43:02 +0200 Subject: [PATCH 2/7] Traduction transitions.md (2) --- src/v2/guide/transitions.md | 64 ++++++++++++++++++------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 0729ef1899..7f2ac28d30 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -478,24 +478,24 @@ methods: { } ``` -These hooks can be used in combination with CSS transitions/animations or on their own. +Ces hooks peuvent être utilisés en combinaison avec des transitions/animations CSS ou sur eux-mêmes. -

When using JavaScript-only transitions, **the `done` callbacks are required for the `enter` and `leave` hooks**. Otherwise, they will be called synchronously and the transition will finish immediately.

+

Lors de l'utilisation de transitions uniquement JavaScript, **les fonctions de retour `done` sont obligatoires pour les hooks `enter` et `leave`**. Dans le cas contraire, elles seront appelées de façon synchrone et la transition se terminera immédiatement.

-

It's also a good idea to explicitly add `v-bind:css="false"` for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.

+

C'est aussi une bonne idée d'ajouter explicitement `v-bind:css="false"` pour les transitions uniquement JavaScript afin que Vue puisse ignorer la détection CSS. Cela empêche également les règles CSS d'interfèrer accidentellement avec la transition.

-Now let's dive into an example. Here's a simple JavaScript transition using Velocity.js: +Maintenant, nous allons plonger dans un exemple. Voici une simple transition JavaScript à l'aide de Velocity.js : ``` html

- Demo + Démo

@@ -541,7 +541,7 @@ new Vue({ {% raw %}

- Demo + Démo

@@ -584,9 +584,9 @@ new Vue({ {% endraw %} -## Transitions on Initial Render +## Transitions sur le rendu initial -If you also want to apply a transition on the initial render of a node, you can add the `appear` attribute: +Si vous souhaitez également appliquer une transition sur le rendu initial d'un nœud, vous pouvez ajouter l'attribut `appear` : ``` html @@ -594,7 +594,7 @@ If you also want to apply a transition on the initial render of a node, you can ``` -By default, this will use the transitions specified for entering and leaving. If you'd like however, you can also specify custom CSS classes: +Par défaut, cela utilisera les transitions spécifiées pour l’entrée et la sortie. Si vous le souhaitez, vous pouvez également spécifier des classes CSS personnalisées : ``` html ``` -and custom JavaScript hooks: +et des hooks JavaScript personnalisés : ``` html ``` -## Transitioning Between Elements +## Transition entre éléments -We discuss [transitioning between components](#Transitioning-Between-Components) later, but you can also transition between raw elements using `v-if`/`v-else`. One of the most common two-element transitions is between a list container and a message describing an empty list: +Plus loin, nous parlons de [transition entre les composants](#Transitioning-Between-Components), mais vous pouvez également faire une transition entre des éléments bruts en utilisant `v-if`/`v-else`. L'une des transitions les plus courantes sur deux éléments est entre un conteneur de liste et un message décrivant une liste vide : ``` html
-

Sorry, no items found.

+

Désolé, aucun élément trouvé.

 ``` -This works well, but there's one caveat to be aware of: +Cela fonctionne bien, mais il y a une mise en garde à connaître : -

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 `` component.**

+

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 ``.**

-For example: +Par exemple : ``` html ``` -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 : ``` html ``` -It's actually possible to transition between any number of elements, either by using multiple `v-if`s or binding a single element to a dynamic property. For example: +Il est effectivement possible de faire une transition entre un nombre indéfini d'éléments, soit en utilisant plusieurs `v-if` ou soit en liant un élément unique à une propriété dynamique. Par exemple : ``` html ``` -Which could also be written as: +Qui pourrait aussi s'écrire ainsi : ``` html @@ -692,9 +692,9 @@ Which could also be written as: computed: { buttonMessage: function () { switch (docState) { - case 'saved': return 'Edit' - case 'edited': return 'Save' - case 'editing': return 'Cancel' + case 'saved': return 'Modifier' + case 'edited': return 'Sauver' + case 'editing': return 'Annuler' } } } From e1f3696044d956808182a21a9eca8baa03d90c68 Mon Sep 17 00:00:00 2001 From: forresst Date: Fri, 2 Jun 2017 09:36:42 +0200 Subject: [PATCH 3/7] Traduction transitions.md (3) --- src/v2/guide/transitions.md | 45 ++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 23 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 9ee7b4c67c..9f254db3f5 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -350,7 +350,6 @@ new Vue({ ### Utilisation à la fois des transitions et des animations - Vue a besoin d'attacher des écouteurs d’événements pour savoir quand une transition est terminée. Cela peut être `transitionend` ou `animationend`, selon le type de règles CSS appliquées. Si vous utilisez seulement l'une ou l’autre, Vue peut automatiquement découvrir le type correct. Toutefois, dans certains cas vous pouvez les avoir à la fois sur le même élément, par exemple avoir une animation de CSS déclenchée par Vue, ainsi qu'un effet de transition CSS lors du survol. Dans ces cas, vous devrez explicitement déclarer le type dont vous voulez que Vue se soucie dans un attribut `type`, avec une valeur à `animation` ou `transition`. @@ -661,9 +660,9 @@ computed: { } ``` -### Transition Modes +### Les modes de transition -There's still one problem though. Try clicking the button below: +Cependant, il existe encore un problème. Essayez de cliquer sur le bouton ci-dessous : {% raw %}
@@ -694,9 +693,9 @@ new Vue({ {% 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 `` - 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 `` (l'entrée et la sortie se font simultanément). -Sometimes this works great, like when transitioning items are absolutely positioned on top of each other: +Parfois, cela fonctionne très bien, comme lorsque des éléments de transition sont absolument positionnés l'un sur l'autre : {% raw %}
@@ -736,7 +735,7 @@ new Vue({ {% endraw %} -And then maybe also translated so that they look like slide transitions: +Et puis cela peut être interprété comme des transitions de diapositives. {% raw %}
@@ -782,17 +781,17 @@ new Vue({ {% endraw %} -Simultaneous entering and leaving transitions aren't always desirable though, so Vue offers some alternative **transition modes**: +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 : -- `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. -Now let's update the transition for our on/off buttons with `out-in`: +Maintenant, mettons à jour la transition pour nos boutons on/off avec `out-in` : ``` html - + ``` @@ -825,9 +824,9 @@ new Vue({ {% endraw %} -With one simple attribute addition, we've fixed that original transition without having to add any special styling. +Avec l'ajout d'un simple attribut, nous avons corrigé cette transition originale sans devoir ajouter un style spécial. -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. {% raw %}
@@ -873,11 +872,11 @@ new Vue({ {% endraw %} -Pretty cool, right? +Assez cool, non ? -## Transitioning Between Components +## Transition entre composants -Transitioning between components is even simpler - we don't even need the `key` attribute. Instead, we just wrap a [dynamic component](components.html#Dynamic-Components): +Faire une transition entre composants est encore plus simple (nous n'avons même pas besoin de l'attribut `key`). Au lieu de cela, nous les enveloppons simplement un [composant dynamique](components.html#Dynamic-Components) : ``` html @@ -893,10 +892,10 @@ new Vue({ }, components: { 'v-a': { - template: '
Component A
' + template: '
Composant A
' }, 'v-b': { - template: '
Component B
' + template: '
Composant B
' } } }) @@ -907,7 +906,7 @@ new Vue({ transition: opacity .3s ease; } .component-fade-enter, .component-fade-leave-to -/* .component-fade-leave-active for <2.1.8 */ { +/* .component-fade-leave-active pour <2.1.8 */ { opacity: 0; } ``` @@ -936,17 +935,17 @@ new Vue({ }, components: { 'v-a': { - template: '
Component A
' + template: '
Composant A
' }, 'v-b': { - template: '
Component B
' + template: '
Composant B
' } } }) {% endraw %} -## List Transitions +## Transitions de liste So far, we've managed transitions for: @@ -1487,7 +1486,7 @@ Vue.component('my-special-transition', { render: function (createElement, context) { var data = { props: { - name: 'very-special-transition', + name: 'very-special-transition' mode: 'out-in' }, on: { From fd04405ebff0e645ce6169035a1587a7aa5263bd Mon Sep 17 00:00:00 2001 From: forresst Date: Tue, 6 Jun 2017 09:18:53 +0200 Subject: [PATCH 4/7] Traduction transitions.md (4) --- src/v2/guide/transitions.md | 103 ++++++++++++++++++------------------ 1 file changed, 51 insertions(+), 52 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 9f254db3f5..089981fb7d 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -352,7 +352,7 @@ new Vue({ Vue a besoin d'attacher des écouteurs d’événements pour savoir quand une transition est terminée. Cela peut être `transitionend` ou `animationend`, selon le type de règles CSS appliquées. Si vous utilisez seulement l'une ou l’autre, Vue peut automatiquement découvrir le type correct. -Toutefois, dans certains cas vous pouvez les avoir à la fois sur le même élément, par exemple avoir une animation de CSS déclenchée par Vue, ainsi qu'un effet de transition CSS lors du survol. Dans ces cas, vous devrez explicitement déclarer le type dont vous voulez que Vue se soucie dans un attribut `type`, avec une valeur à `animation` ou `transition`. +Toutefois, dans certains cas, vous pouvez les avoir tous les deux sur le même élément, par exemple avoir une animation CSS déclenchée par Vue, ainsi qu'un effet de transition CSS lors du survol. Dans ces cas, vous devez explicitement déclarer le type dont vous voulez que Vue se soucie dans un attribut `type`, avec une valeur à `animation` ou `transition`. ### Durées de transition explicites @@ -455,7 +455,7 @@ une excellente option pour les animations
@@ -947,24 +947,24 @@ new Vue({ ## Transitions de liste -So far, we've managed transitions for: +Jusqu'à présent, nous avons réalisé des transitions pour : -- Individual nodes -- Multiple nodes where only 1 is rendered at a time +- des nœuds individuels +- des nœuds multiples où un seul est rendu à la fois -So what about for when we have a whole list of items we want to render simultaneously, for example with `v-for`? In this case, we'll use the `` component. Before we dive into an example though, there are a few things that are important to know about this component: +Alors, qu'en est-il lorsque nous avons une liste complète d'éléments où nous voulons faire un rendu simultané, par exemple avec `v-for` ? Dans ce cas, nous allons utiliser le composant ``. Cependant avant de plonger dans un exemple, il y a quelques éléments importants à connaître sur ce composant : -- Unlike ``, it renders an actual element: a `` by default. You can change the element that's rendered with the `tag` attribute. -- Elements inside are **always required** to have a unique `key` attribute +- Contrairement à ``, il rend un élément réel : par défaut un ``. Vous pouvez modifier l'élément rendu avec l'attribut `tag`. +- Les éléments à l'intérieur **doivent toujours avoir** un attribut `key` unique -### List Entering/Leaving Transitions +### Transitions de liste entrantes/sortantes -Now let's dive into a simple example, transitioning entering and leaving using the same CSS classes we've used previously: +Maintenant, nous allons nous plonger dans un exemple simple, faire des transitions entrantes et sortantes en utilisant les mêmes classes CSS que celles utilisées précédemment : ``` html
- - + + {{ item }} @@ -1010,8 +1010,8 @@ new Vue({ {% raw %}
- - + + {{ item }} @@ -1053,19 +1053,19 @@ new Vue({ {% endraw %} -There's one problem with this example. When you add or remove an item, the ones around it instantly snap into their new place instead of smoothly transitioning. We'll fix that later. +Il y a un problème avec cet exemple. Quand vous ajoutez ou enlevez un élément, ceux qui l'entourent se placent instantanément dans leur nouvel emplacement au lieu de se déplacer en douceur. Nous allons régler cela plus tard. -### List Move Transitions +### Transitions de déplacement de liste -The `` component has another trick up its sleeve. It can not only animate entering and leaving, but also changes in position. The only new concept you need to know to use this feature is the addition of **the `v-move` class**, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided `name` attribute and you can also manually specify a class with the `move-class` attribute. +Le composant `` a un autre tour dans son sac. Il peut non seulement animer l'entrée et la sortie, mais aussi faire des changements de position. Le seul nouveau concept que vous devez connaitre pour utiliser cette fonctionnalité, c'est l'addition de **la classe `v-move`**, qui est ajoutée quand les éléments changent de position. Comme les autres classes, son préfixe correspondra à la valeur d'un attribut `name` fourni et vous pouvez également spécifier manuellement une classe avec l'attribut `move-class`. -This class is mostly useful for specifying the transition timing and easing curve, as you'll see below: +Cette classe est surtout utile pour spécifier le temps de la transition et la courbe d’accélération, comme vous pourrez le voir ci-dessous : ``` html
- +
  • {{ item }} @@ -1097,7 +1097,7 @@ new Vue({ {% raw %}
    - +
  • {{ item }} @@ -1124,17 +1124,17 @@ new Vue({ {% endraw %} -This might seem like magic, but under the hood, Vue is using a simple animation technique called [FLIP](https://aerotwist.com/blog/flip-your-animations/) to smoothly transition elements from their old position to their new position using transforms. +Cela peut sembler magique, mais sous le capot, Vue utilise une technique d'animation simple appelée [FLIP](https://aerotwist.com/blog/flip-your-animations/) pour transiter en douceur les éléments de leur ancienne position vers la nouvelle à l'aide de de transformations. -We can combine this technique with our previous implementation to animate every possible change to our list! +Nous pouvons combiner cette technique avec notre implémentation précédente pour animer chaque changement possible dans notre liste ! ``` html
    - - - + + +
    - - - + + + {{ item }} @@ -1238,16 +1238,16 @@ new Vue({ {% endraw %} -

    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.

    +

    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.

    -These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can transitioned [just as easily](https://jsfiddle.net/chrisvfritz/sLrhk1bc/): +Ces animations FLIP ne se limitent pas à un seul axe. Les éléments dans une grille multidimensionnelle peuvent être transitionnés [aussi facilement](https://jsfiddle.net/chrisvfritz/sLrhk1bc/) : {% raw %}
    - Lazy Sudoku -

    Keep hitting the shuffle button until you win.

    + Sudoku de fainéant +

    Continuez à appuyer sur le bouton Mélanger jusqu'à ce que vous gagnez.

    @@ -1303,9 +1303,9 @@ new Vue({ {% endraw %} -### Staggering List Transitions +### Echelonnage des transitions de liste -By communicating with JavaScript transitions through data attributes, it's also possible to stagger transitions in a list: +En communiquant avec des transitions JavaScript via des attributs de données, il est également possible d'échelonner les transitions dans une liste : ``` html @@ -1449,11 +1449,11 @@ new Vue({ {% endraw %} -## Reusable Transitions +## Transitions réutilisables -Transitions can be reused through Vue's component system. To create a reusable transition, all you have to do is place a `` or `` component at the root, then pass any children into the transition component. +Les Transitions peuvent être réutilisées par le biais du système de composant de Vue. Pour créer une transition réutilisable, il suffit de placer un composant `` ou `` à la racine, puis passer les enfants dans le composant de transition. -Here's an example using a template component: +Voici un exemple utilisant un composant template : ``` js Vue.component('my-special-transition', { @@ -1478,7 +1478,7 @@ Vue.component('my-special-transition', { }) ``` -And functional components are especially well-suited to this task: +Et les composants fonctionnels sont particulièrement adaptés à cette tâche : ``` js Vue.component('my-special-transition', { @@ -1486,7 +1486,7 @@ Vue.component('my-special-transition', { render: function (createElement, context) { var data = { props: { - name: 'very-special-transition' + name: 'very-special-transition', mode: 'out-in' }, on: { @@ -1503,9 +1503,9 @@ Vue.component('my-special-transition', { }) ``` -## Dynamic Transitions +## Transitions dynamiques -Yes, even transitions in Vue are data-driven! The most basic example of a dynamic transition binds the `name` attribute to a dynamic property. +Oui, même les transitions dans Vue sont pilotées par les données ! L'exemple le plus simple d'une transition dynamique lie le nom de l'attribut à une propriété dynamique. ```html @@ -1513,9 +1513,9 @@ Yes, even transitions in Vue are data-driven! The most basic example of a dynami ``` -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. -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. ``` html @@ -1529,9 +1529,9 @@ Really though, any transition attribute can be dynamically bound. And it's not j v-on:enter="enter" v-on:leave="leave" > -

    hello

    +

    bonjour

     - +
    ``` @@ -1593,9 +1593,9 @@ new Vue({ v-on:enter="enter" v-on:leave="leave" > -

    hello

    +

    bonjour/p> - +

    {% 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. From e098027ab80deb9d53a5ae3c0e22413f9bda3828 Mon Sep 17 00:00:00 2001 From: forresst Date: Tue, 6 Jun 2017 11:25:18 +0200 Subject: [PATCH 5/7] Traduction transitions.md (5) --- src/v2/guide/transitions.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 089981fb7d..603de7608a 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -10,14 +10,14 @@ Vue fournit plusieurs façons d'appliquer des effets de transition lorsque des - appliquer automatiquement des classes pour les transitions et les animations CSS - intégrer des bibliothèques d'animation CSS tierces, comme Animate.css -- utiliser JavaScript pour manipuler directement le DOM durant les hooks de transition +- utiliser JavaScript pour manipuler directement le DOM durant les *hooks* de transition - intégrer des bibliothèques d'animation JavaScript tierces, comme Velocity.js -Sur cette page, nous ne traiterons que des transitions d'entrée (enter), de sortie (leave) et de liste, mais vous pouvez consulter la section suivante pour la [gestion des transitions d'état](transitioning-state.html). +Sur cette page, nous ne traiterons que des transitions entrantes (enter), sortantes (leave) et de liste, mais vous pouvez consulter la section suivante pour la [gestion des transitions d'état](transitioning-state.html). ## Transition d'éléments/composants simples -Vue fournit un composant conteneur `transition`, vous permettant d’ajouter des transitions d’entrée/sortie pour n’importe quel élément ou composant dans les contextes suivants : +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 : - Le rendu conditionnel (en utilisant `v-if`) - L'affichage conditionnel (en utilisant `v-show`) @@ -86,25 +86,25 @@ Quand un élément, encapsulé dans un composant `transition`, est inséré ou e 1. Vue recherchera automatiquement si l'élément cible a des transitions CSS ou des animations appliquées. Si c'est le cas, les classes de transition CSS seront ajoutées/supprimées aux moments appropriés. -2. Si le composant de transition possède des [hooks JavaScript](#JavaScript-Hooks), ces hooks seront appelés aux moments appropriés. +2. Si le composant de transition possède des [hooks JavaScript](#Hooks-JavaScript), ces hooks seront appelés aux moments appropriés. 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`). ### Classes de transition -Il y a six classes appliquées pour les transitions d'entrée/sortie (enter/leave). +Il y a six classes appliquées pour les transitions entrantes/sortantes (enter/leave). 1. `v-enter`: C'est l'état de départ pour *enter*. Il est ajouté avant que l'élément soit inséré, il est supprimé une fois que l'élément est inséré. -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 d'entrée (enter). +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). 3. `v-enter-to`: **Seulement disponible pour les versions >=2.1.8.** C'est l'état de fin pour *enter*. Il est ajouté une fois que l'élément est inséré (au même moment que `v-enter` est supprimé), il est supprimé lorsque la transition/animation est terminée. -4. `v-leave`: C'est l'état de départ pour *leave*. Il est ajouté dès qu'une transition de sortie (leave) est déclenchée, il est supprimé une fois faite. +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. -5. `v-leave-active`: C'est l'état actif pour *leave*. Il est appliqué pendant toute la phase *leave*. Il est ajouté dès qu'une transition de sortie (leave) est déclenchée, 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 de sortie (leave). +5. `v-leave-active`: C'est l'état actif pour *leave*. Il est appliqué pendant toute la phase *leave*. Il est ajouté dès qu'une transition sortante (leave) est déclenchée, 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 de sortie (leave). -6. `v-leave-to`: **Seulement disponible pour les versions >=2.1.8.** C'est l'état de fin pour *leave*. Il est ajouté après que la transition de sortie soit déclenchée (au même moment que `v-leave` est supprimé), il est supprimé lorsque la transition/animation est terminée. +6. `v-leave-to`: **Seulement disponible pour les versions >=2.1.8.** C'est l'état de fin pour *leave*. Il est ajouté après que la transition sortante soit déclenchée (au même moment que `v-leave` est supprimé), il est supprimé lorsque la transition/animation est terminée. ![Diagramme de transition](/images/transition.png) @@ -137,8 +137,8 @@ new Vue({ ``` ``` css -/* Enter and leave animations can use different */ -/* durations and timing functions. */ +/* Les animations Enter et leave peuvent utiliser differentes */ +/* fonctions de durée et de temps. */ .slide-fade-enter-active { transition: all .3s ease; } @@ -350,7 +350,7 @@ new Vue({ ### Utilisation à la fois des transitions et des animations -Vue a besoin d'attacher des écouteurs d’événements pour savoir quand une transition est terminée. Cela peut être `transitionend` ou `animationend`, selon le type de règles CSS appliquées. Si vous utilisez seulement l'une ou l’autre, Vue peut automatiquement découvrir le type correct. +Vue a besoin d'attacher des écouteurs d’événements pour savoir quand une transition est terminée. Cela peut être `transitionend` ou `animationend`, selon le type de règles CSS appliquées. Si vous utilisez seulement l'une ou l’autre, Vue peut automatiquement déterminer le type correct. Toutefois, dans certains cas, vous pouvez les avoir tous les deux sur le même élément, par exemple avoir une animation CSS déclenchée par Vue, ainsi qu'un effet de transition CSS lors du survol. Dans ces cas, vous devez explicitement déclarer le type dont vous voulez que Vue se soucie dans un attribut `type`, avec une valeur à `animation` ou `transition`. @@ -583,7 +583,7 @@ et des hooks JavaScript personnalisés : ## Transition entre éléments -Plus loin, nous parlons de [transition entre les composants](#Transitioning-Between-Components), mais vous pouvez également faire une transition entre des éléments bruts en utilisant `v-if`/`v-else`. L'une des transitions les plus courantes sur deux éléments est entre un conteneur de liste et un message décrivant une liste vide : +Plus loin, nous parlons de [transition entre les composants](#transition-entre-les-composants), mais vous pouvez également faire une transition entre des éléments bruts en utilisant `v-if`/`v-else`. L'une des transitions les plus courantes sur deux éléments est entre un conteneur de liste et un message décrivant une liste vide : ``` html @@ -876,7 +876,7 @@ Assez cool, non ? ## Transition entre les composants -Faire une transition entre les composants est encore plus simple (nous n'avons même pas besoin de l'attribut `key`). Au lieu de cela, nous les enveloppons simplement d'un [composant dynamique](components.html#Dynamic-Components) : +Faire une transition entre les composants est encore plus simple (nous n'avons même pas besoin de l'attribut `key`). Au lieu de cela, nous les enveloppons simplement d'un [composant dynamique](components.html#Composants-dynamiques) : ``` html @@ -954,7 +954,7 @@ Jusqu'à présent, nous avons réalisé des transitions pour : Alors, qu'en est-il lorsque nous avons une liste complète d'éléments où nous voulons faire un rendu simultané, par exemple avec `v-for` ? Dans ce cas, nous allons utiliser le composant ``. Cependant avant de plonger dans un exemple, il y a quelques éléments importants à connaître sur ce composant : -- Contrairement à ``, il rend un élément réel : par défaut un ``. Vous pouvez modifier l'élément rendu avec l'attribut `tag`. +- Contrairement à ``, il rend un élément réel : par défaut un ``. Vous pouvez modifier l'élément rendu avec l'attribut `tag`. - Les éléments à l'intérieur **doivent toujours avoir** un attribut `key` unique ### Transitions de liste entrantes/sortantes @@ -1124,7 +1124,7 @@ new Vue({ {% endraw %} -Cela peut sembler magique, mais sous le capot, Vue utilise une technique d'animation simple appelée [FLIP](https://aerotwist.com/blog/flip-your-animations/) pour transiter en douceur les éléments de leur ancienne position vers la nouvelle à l'aide de de transformations. +Cela peut sembler magique, mais sous le capot, Vue utilise une technique simple d'animation appelée [FLIP](https://aerotwist.com/blog/flip-your-animations/) pour transiter en douceur les éléments de leur ancienne position vers la nouvelle à l'aide de transformations. Nous pouvons combiner cette technique avec notre implémentation précédente pour animer chaque changement possible dans notre liste ! @@ -1505,7 +1505,7 @@ Vue.component('my-special-transition', { ## Transitions dynamiques -Oui, même les transitions dans Vue sont pilotées par les données ! L'exemple le plus simple d'une transition dynamique lie le nom de l'attribut à une propriété dynamique. +Oui, même les transitions dans Vue sont pilotées par les données ! Le plus simple des exemples d'une transition dynamique lie l'attribut `name` à une propriété dynamique. ```html From 77fd51575729b6f374fc389c0d230a68ac689173 Mon Sep 17 00:00:00 2001 From: forresst Date: Fri, 16 Jun 2017 10:39:52 +0200 Subject: [PATCH 6/7] A la suite de la 1er relecture de Haeresis --- src/v2/guide/transitions.md | 44 ++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 603de7608a..87099a4658 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -13,11 +13,11 @@ Vue fournit plusieurs façons d'appliquer des effets de transition lorsque des - utiliser JavaScript pour manipuler directement le DOM durant les *hooks* de transition - intégrer des bibliothèques d'animation JavaScript tierces, comme Velocity.js -Sur cette page, nous ne traiterons que des transitions entrantes (enter), sortantes (leave) et de liste, mais vous pouvez consulter la section suivante pour la [gestion des transitions d'état](transitioning-state.html). +Sur cette page, nous ne traiterons que des transitions entrantes, sortantes et de liste, mais vous pouvez consulter la section suivante pour la [gestion des transitions d'état](transitioning-state.html). ## Transition d'éléments/composants simples -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 : +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 : - Le rendu conditionnel (en utilisant `v-if`) - L'affichage conditionnel (en utilisant `v-show`) @@ -92,17 +92,17 @@ Quand un élément, encapsulé dans un composant `transition`, est inséré ou e ### Classes de transition -Il y a six classes appliquées pour les transitions entrantes/sortantes (enter/leave). +Il y a six classes appliquées pour les transitions entrantes/sortantes. 1. `v-enter`: C'est l'état de départ pour *enter*. Il est ajouté avant que l'élément soit inséré, il est supprimé une fois que l'élément est inséré. -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). +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. 3. `v-enter-to`: **Seulement disponible pour les versions >=2.1.8.** C'est l'état de fin pour *enter*. Il est ajouté une fois que l'élément est inséré (au même moment que `v-enter` est supprimé), il est supprimé lorsque la transition/animation est terminée. -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. +4. `v-leave`: C'est l'état de départ pour *leave*. Il est ajouté dès qu'une transition sortante est déclenchée, il est supprimé après une frame. -5. `v-leave-active`: C'est l'état actif pour *leave*. Il est appliqué pendant toute la phase *leave*. Il est ajouté dès qu'une transition sortante (leave) est déclenchée, 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 de sortie (leave). +5. `v-leave-active`: C'est l'état actif pour *leave*. Il est appliqué pendant toute la phase *leave*. Il est ajouté dès qu'une transition sortante est déclenchée, 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 de sortie. 6. `v-leave-to`: **Seulement disponible pour les versions >=2.1.8.** C'est l'état de fin pour *leave*. Il est ajouté après que la transition sortante soit déclenchée (au même moment que `v-leave` est supprimé), il est supprimé lorsque la transition/animation est terminée. @@ -110,7 +110,7 @@ Il y a six classes appliquées pour les transitions entrantes/sortantes (enter/l 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 `` sans nom. Si vous utilisez par exemple ``, alors la classe `v-enter` sera nommé `ma-transition-enter`. -`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. +`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. ### Transitions CSS @@ -137,8 +137,8 @@ new Vue({ ``` ``` css -/* Les animations Enter et leave peuvent utiliser differentes */ -/* fonctions de durée et de temps. */ +/* Les animations d'entrée (« enter ») et de sortie (« leave ») */ +/* peuvent utiliser differentes fonctions de durée et de temps. */ .slide-fade-enter-active { transition: all .3s ease; } @@ -348,9 +348,9 @@ new Vue({ {% endraw %} -### Utilisation à la fois des transitions et des animations +### Utilisation simultanée des transitions et animations -Vue a besoin d'attacher des écouteurs d’événements pour savoir quand une transition est terminée. Cela peut être `transitionend` ou `animationend`, selon le type de règles CSS appliquées. Si vous utilisez seulement l'une ou l’autre, Vue peut automatiquement déterminer le type correct. +Vue a besoin d'attacher des écouteurs d'évènement pour savoir quand une transition est terminée. Cela peut être `transitionend` ou `animationend`, selon le type de règles CSS appliquées. Si vous utilisez seulement l'une ou l'autre, Vue peut automatiquement déterminer le type correct. Toutefois, dans certains cas, vous pouvez les avoir tous les deux sur le même élément, par exemple avoir une animation CSS déclenchée par Vue, ainsi qu'un effet de transition CSS lors du survol. Dans ces cas, vous devez explicitement déclarer le type dont vous voulez que Vue se soucie dans un attribut `type`, avec une valeur à `animation` ou `transition`. @@ -358,7 +358,7 @@ Toutefois, dans certains cas, vous pouvez les avoir tous les deux sur le même > Nouveau dans 2.2.0 -Dans la plupart des cas, Vue peut automatiquement déterminer quand la transition est terminée. Par défaut, Vue attend le premier événement `transitionend` ou `animationend` sur l’élément de transition racine. Cependant, cela peut ne pas toujours être souhaité (par exemple, nous pouvons avoir une séquence de transition chorégraphiée où certains éléments internes imbriqués ont une transition retardée ou une durée de transition plus longue que l’élément de transition racine). +Dans la plupart des cas, Vue peut automatiquement déterminer quand la transition est terminée. Par défaut, Vue attend le premier évènement `transitionend` ou `animationend` sur l'élément de transition racine. Cependant, cela peut ne pas toujours être souhaité (par exemple, nous pouvons avoir une séquence de transition chorégraphiée où certains éléments internes imbriqués ont une transition retardée ou une durée de transition plus longue que l'élément de transition racine). Dans ce cas, vous pouvez spécifier une durée de transition explicite (en millisecondes) en utilisant le prop `duration` sur le composant `` : @@ -402,7 +402,7 @@ methods: { beforeEnter: function (el) { // ... }, - // la fonction de retour done est facultative quand + // la fonction de rappel done est facultative quand // c'est utilisé en combinaison avec du CSS enter: function (el, done) { // ... @@ -422,7 +422,7 @@ methods: { beforeLeave: function (el) { // ... }, - // la fonction de retour done est facultative quand + // la fonction de rappel done est facultative quand // c'est utilisé en combinaison avec du CSS leave: function (el, done) { // ... @@ -554,7 +554,7 @@ Si vous souhaitez également appliquer une transition sur le rendu initial d'un ``` -Par défaut, cela utilisera les transitions spécifiées pour l’entrée et la sortie. Si vous le souhaitez, vous pouvez également spécifier des classes CSS personnalisées : +Par défaut, cela utilisera les transitions spécifiées pour l'entrée et la sortie. Si vous le souhaitez, vous pouvez également spécifier des classes CSS personnalisées : ``` html 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 ``.**

    +

    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 ``.**

    Par exemple : @@ -611,7 +611,7 @@ Par exemple :     ``` -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 : +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 : ``` html @@ -693,7 +693,7 @@ new Vue({ {% endraw %} -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 `` (l'entrée et la sortie se font simultanément). +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 `` (l'entrée et la sortie se font simultanément). Parfois, cela fonctionne très bien, comme lorsque des éléments de transition sont absolument positionnés l'un sur l'autre : @@ -826,7 +826,7 @@ new Vue({ Avec l'ajout d'un simple attribut, nous avons corrigé cette transition originale sans devoir ajouter un style spécial. -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. +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. {% raw %}
    @@ -1059,7 +1059,7 @@ Il y a un problème avec cet exemple. Quand vous ajoutez ou enlevez un élément Le composant `` a un autre tour dans son sac. Il peut non seulement animer l'entrée et la sortie, mais aussi faire des changements de position. Le seul nouveau concept que vous devez connaitre pour utiliser cette fonctionnalité, c'est l'addition de **la classe `v-move`**, qui est ajoutée quand les éléments changent de position. Comme les autres classes, son préfixe correspondra à la valeur d'un attribut `name` fourni et vous pouvez également spécifier manuellement une classe avec l'attribut `move-class`. -Cette classe est surtout utile pour spécifier le temps de la transition et la courbe d’accélération, comme vous pourrez le voir ci-dessous : +Cette classe est surtout utile pour spécifier le temps de la transition et la courbe d'accélération, comme vous pourrez le voir ci-dessous : ``` html @@ -1238,7 +1238,7 @@ new Vue({ {% endraw %} -

    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.

    +

    Un point important est a noter : 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.

    Ces animations FLIP ne se limitent pas à un seul axe. Les éléments dans une grille multidimensionnelle peuvent être transitionnés [aussi facilement](https://jsfiddle.net/chrisvfritz/sLrhk1bc/) : @@ -1303,7 +1303,7 @@ new Vue({ {% endraw %} -### Echelonnage des transitions de liste +### Échelonnage des transitions de liste En communiquant avec des transitions JavaScript via des attributs de données, il est également possible d'échelonner les transitions dans une liste : From 62424b6a1dbc45fa16674b93a282c9ff333dab15 Mon Sep 17 00:00:00 2001 From: forresst Date: Fri, 16 Jun 2017 12:50:00 +0200 Subject: [PATCH 7/7] A la suite de la 1er relecture de sylvainpolletvillard --- src/v2/guide/transitions.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/v2/guide/transitions.md b/src/v2/guide/transitions.md index 87099a4658..76cddffc02 100644 --- a/src/v2/guide/transitions.md +++ b/src/v2/guide/transitions.md @@ -88,7 +88,7 @@ Quand un élément, encapsulé dans un composant `transition`, est inséré ou e 2. Si le composant de transition possède des [hooks JavaScript](#Hooks-JavaScript), ces hooks seront appelés aux moments appropriés. -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`). +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`). ### Classes de transition @@ -110,7 +110,7 @@ Il y a six classes appliquées pour les transitions entrantes/sortantes. 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 `` sans nom. Si vous utilisez par exemple ``, alors la classe `v-enter` sera nommé `ma-transition-enter`. -`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. +`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. ### Transitions CSS @@ -403,7 +403,7 @@ methods: { // ... }, // la fonction de rappel done est facultative quand - // c'est utilisé en combinaison avec du CSS + // utilisée en combinaison avec du CSS enter: function (el, done) { // ... done() @@ -423,7 +423,7 @@ methods: { // ... }, // la fonction de rappel done est facultative quand - // c'est utilisé en combinaison avec du CSS + // utilisée en combinaison avec du CSS leave: function (el, done) { // ... done() @@ -693,7 +693,7 @@ new Vue({ {% endraw %} -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 `` (l'entrée et la sortie se font simultanément). +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 `` (l'entrée et la sortie se font simultanément). Parfois, cela fonctionne très bien, comme lorsque des éléments de transition sont absolument positionnés l'un sur l'autre : @@ -783,9 +783,9 @@ new Vue({ 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 : -- `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. +- `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. -- `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. +- `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. Maintenant, mettons à jour la transition pour nos boutons on/off avec `out-in` : @@ -1513,9 +1513,9 @@ Oui, même les transitions dans Vue sont pilotées par les données ! Le plus si ``` -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. +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. -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. +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. ``` html @@ -1645,4 +1645,4 @@ new Vue({ {% endraw %} -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. +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.