Как сделать Vue Routers Page Transition

Question

Я могу использовать vue.js с VueRouter. Мне нужно сделать переходы страниц, но я не могу. Как я могу реализовать этот код.

Мой код здесь https://jsbin.com/hopilecona/edit?html,css,js,output

Пожалуйста, помогите.

Answer 1

Переходы страниц работают так же, как и с нормальными переходами, я вижу, что вы перевернули представление маршрутизатора при переходе, вы также должны убедиться, что он находится в режиме out-in, поэтому первая страница исчезает до следующего замирания:

<transition name="fade" mode="out-in"> 
    <router-view></router-view> 
</transition> 

Теперь создать выцветанию переход Вам понадобится следующее CSS:

.fade-enter-active, .fade-leave-active { 
    transition: opacity .5s 
} 
.fade-enter, .fade-leave-active { 
    opacity: 0 
} 

После того, что это просто вопрос настройки вашего вида маршрутизатора, как обычно. Вот JSFiddle:

https://jsfiddle.net/npe10jot/