Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
- Avancé
- [Navigation Guards (En)](advanced/navigation-guards.md)
- [Route Meta Fields (En)](advanced/meta.md)
- [Transitions (En)](advanced/transitions.md)
- [Les transitions](advanced/transitions.md)
- [Data Fetching (En)](advanced/data-fetching.md)
- [Scroll Behavior (En)](advanced/scroll-behavior.md)
- [Lazy Loading (En)](advanced/lazy-loading.md)
Expand Down
22 changes: 11 additions & 11 deletions docs/en/advanced/transitions.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# Transitions (En) <br><br> *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/vue-router).*
# Les transitions

Since the `<router-view>` is essentially a dynamic component, we can apply transition effects to it the same way using the `<transition>` component:
Vu que `<router-view>` est essentiellement un composant dynamique, on peut lui appliquer certains effets de transitions en utilisant le composant `<transition>` :

``` html
<transition>
<router-view></router-view>
</transition>
```

[Everything about `<transition>`](http://vuejs.org/guide/transitions.html) works the same here.
[Tout à propos de `<transition>`](http://fr.vuejs.org/v2/guide/transitions.html) fonctionne également ici de la même manière.

### Per-Route Transition
### Transition par route

The above usage will apply the same transition for all routes. If you want each route's component to have different transitions, you can instead use `<transition>` with different names inside each route component:
L'utilisation au dessus applique la même transition pour chaque route. Si vous voulez que les composants de route aient des transitions différentes, vous pouvez utiliser à la place `<transition>` avec des noms différents à l'intérieur de chaque composant de route :

``` js
const Foo = {
Expand All @@ -32,20 +32,20 @@ const Bar = {
}
```

### Route-Based Dynamic Transition
# Transition dynamique basée sur la route

It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route:
Il est aussi possible de déterminer la transition à utiliser en se basant sur la relation entre la route cible et la route actuelle :

``` html
<!-- use a dynamic transition name -->
<!-- utiliser un nom de transition dynamique -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
```

``` js
// then, in the parent component,
// watch the $route to determine the transition to use
// et dans le composant parent,
// observer la $route pour déterminer la transition à utiliser
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

la $route

je PR l'original

watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
Expand All @@ -55,4 +55,4 @@ watch: {
}
```

See full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js).
Voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js).