diff --git a/src/v2/guide/transitioning-state.md b/src/v2/guide/transitioning-state.md index 55d82143c4..0e20dead28 100644 --- a/src/v2/guide/transitioning-state.md +++ b/src/v2/guide/transitioning-state.md @@ -1,21 +1,21 @@ --- -title: Transitioning State (En) +title: État de transition type: guide order: 14 --- -

**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's transition system offers many simple ways to animate entering, leaving, and lists, but what about animating your data itself? For example:

+Le système de transition de Vue offre de nombreuses façons simples d'animer l'entrée, la sortie et les listes, mais qu'en est-il de l'animation de vos propres données ? Par exemple : -- numbers and calculations -- colors displayed -- the positions of SVG nodes -- the sizes and other properties of elements +- les nombres et les calculs +- les couleurs affichées +- les positions des nœuds SVG +- les tailles et les autres propriétés des éléments -All of these are either already stored as raw numbers or can be converted into numbers. Once we do that, we can animate these state changes using 3rd-party libraries to tween state, in combination with Vue's reactivity and component systems. +Tous ces éléments sont déjà stockés sous forme de nombres bruts, ou peuvent être convertis en nombres. Dès lors, nous pouvons animer ces modifications de l'état à l'aide de bibliothèques tierces vers un état intermédiaire, en combinaison avec la réactivité de Vue et les systèmes de composants. -## Animating State with Watchers +## Animation de l'état avec des observateurs -Watchers allow us to animate changes of any numerical property into another property. That may sound complicated in the abstract, so let's dive into an example using [Tween.js](https://github.com/tweenjs/tween.js): +Les observateurs nous permettent d'animer les changements de toute propriété numérique dans une autre propriété. Cela peut paraître compliqué dans l'abstrait, donc plongeons-nous dans un exemple en utilisant [Tween.js](https://github.com/tweenjs/tween.js): ``` html @@ -95,7 +95,7 @@ new Vue({ {% endraw %} -When you update the number, the change is animated below the input. This makes for a nice demo, but what about something that isn't directly stored as a number, like any valid CSS color for example? Here's how we could accomplish this with the addition of [Color.js](https://github.com/brehaut/color-js): +Lorsque vous mettez à jour le nombre, la modification est animée en dessous de l'input. Cela fait une belle démonstration, mais qu'en est-il de quelque-chose qui n'est pas directement stocké comme un nombre, comme n'importe quelle couleur CSS valide par exemple ? Voici comment nous pourrions accomplir cela avec l'ajout de [Color.js](https://github.com/brehaut/color-js): ``` html @@ -105,10 +105,10 @@ When you update the number, the change is animated below the input. This makes f - -

Preview:

+ +

Aperçu :

- -

Preview:

+ +

Aperçu :

{% endraw %} -## Dynamic State Transitions +## Transitions d'état dynamiques -Just as with Vue's transition components, the data backing state transitions can be updated in real time, which is especially useful for prototyping! Even using a simple SVG polygon, you can achieve many effects that would be difficult to conceive of until you've played with the variables a little. +Tout comme pour les composants de transition de Vue, les transitions d'état de données peuvent être mises à jour en temps réel, ce qui est particulièrement utile pour le prototypage ! Même en utilisant un polygone SVG simple, vous pouvez obtenir de nombreux effets qui seraient difficile à concevoir tant que vous n'avez pas un peu joué avec les variables. {% raw %} @@ -266,7 +266,7 @@ Just as with Vue's transition components, the data backing state transitions can - + - + - + {% endraw %} -See [this fiddle](https://jsfiddle.net/chrisvfritz/65gLu2b6/) for the complete code behind the above demo. +Consulter [ce fiddle](https://jsfiddle.net/chrisvfritz/65gLu2b6/) pour voir le code complet derrière la démo ci-dessus. -## Organizing Transitions into Components +## Organisation des transitions dans les composants -Managing many state transitions can quickly increase the complexity of a Vue instance or component. Fortunately, many animations can be extracted out into dedicated child components. Let's do this with the animated integer from our earlier example: +La gestion de nombreuses transitions d'états peut augmenter rapidement la complexité d'une instance ou d'un composant Vue. Heureusement, de nombreuses animations peuvent être extraites dans des composants enfants dédiés. Faisons cela avec l'entier animé de notre exemple précédent : ``` html @@ -412,11 +412,11 @@ Managing many state transitions can quickly increase the complexity of a Vue ins ``` ``` js -// This complex tweening logic can now be reused between -// any integers we may wish to animate in our application. -// Components also offer a clean interface for configuring -// more dynamic transitions and complex transition -// strategies. +// Cette logique d'interpolation complexe peut maintenant être réutilisée entre +// les entiers que nous souhaitons animer dans notre application. +// Les composants offrent également une interface propre pour configurer +// des transitions plus dynamiques et des stratégies complexes +// de transition. Vue.component('animated-integer', { template: '{{ tweeningValue }}', props: { @@ -460,7 +460,7 @@ Vue.component('animated-integer', { } }) -// All complexity has now been removed from the main Vue instance! +// Toute la complexité a été supprimée de l'instance principale de Vue ! new Vue({ el: '#example-8', data: { @@ -545,4 +545,4 @@ new Vue({ {% endraw %} -Within child components, we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions.html). Together, there are very few limits to what can be accomplished. +Dans les composants enfants, nous pouvons utiliser n'importe quelle combinaison de stratégies de transition qui ont été abordées dans cette page, ainsi que celles offertes par le [système intégré de transition](transitions.html) de Vue. En utilisant les deux, il existe très peu de limites à ce qui peut être accompli.