Как сделать transition при переключении по router?

Question

[myskypesla]

Собственно есть 3 routes и на каждой странице, есть текст и картинка, мне необходимо сделать, чтобы при нажатии на router-link, сначала с текущей страницы уезжали влево картинка и текст, а той странице на которую я переключаюсь, другая картинка и текст приезжали.

transition эффект внутри router я делаю, а вот как привязать к кнопкам навигации которая и переключает рорутер, не могу найти пример. Может кто-то делал или видел пример? Дайте ссылку. Спасибо заранее.

Answer 1

[Evgeny Kulakov]

Если вам нужно последовательно проиграть анимацию с картинками и текстом, а потом переключиться на новый маршрут, то можно использовать callback transitionend или animationend, а затем переключиться на новый маршрут.
В итоге:
1. Запуск анимации исчезновения елементов
2. В колбеках transitionend или animationend вызов router.push('new page')
3. Проигрывание анимации при появлении новой страницы

Но может вам подойдет анимация перехода от одного маршрута к другому, тогда просто используйте , применив нужную анимацию:

<transition>
  <router-view></router-view>
</transition>

Документация:
https://ru.vuejs.org/v2/guide/transitions.html#Сов...
https://router.vuejs.org/ru/advanced/transitions.html

Comments

[myskypesla]

Evgeny Kulakov Переходы между маршрутами или же переходы при клике или скроле я освоил.
А вот как реализовать анимацию к примеру как тут, только после переключения маршрута.