Анимация роутов во vue?

Question

[Андрей]

Я уже задавал аналогичный вопрос, и вопрос оказался почти решенным. Однако, при простом применении свойства transition происходит следующее:

• Нажимаем на роут
  
• Первоначальный контент исчезает с заданной анимацией
  
• Появляется содержимое нужного роута с заданной анимацией
  

А можно ли сделать так, чтобы контент шел последовательно друг за другом? Если сказать очень грубо, то нужен эдакий полноэкранный слайдер, но с роутами.

Answer 1

[0xD34F]

https://jsfiddle.net/gcybmo64/

Comments

[Андрей]

Благодарю, выглядит, как решение и в вашем примере код очень понятен. Но возникли трудности с внедрением этого решения в живой проект.
Вы сделали данную анимацию по аналогии с анимацией список во vue, и значения заранее заданы в массивах. А как подобным образом анимировать два компонента? У меня есть компонент домашней страницы Home и есть About.

[0xD34F]

А как подобным образом анимировать два компонента?

А вы посмотрите пример по ссылке ещё раз, но повнимательнее - там как раз два компонента. Слишком перегружено выглядит? Ну вот попроще, без параметров.

[Андрей]

Да, я внимательно изучил ваш код. Опыта во vue маловато и загвоздка в том, что router-view используется с атрибутом :key. И для домашней страницы у вас стоит редирект на компонент с заданным значением.
В общем, буду очень признателен, если немного проясните для меня эти моменты)

[Андрей]

0xD34F, заработало! Секрет оказался в том, чтобы вместо transition использовать transition-group, а в :key вставить рандомное значение. Спасибо!)

[Андрей]

0xD34F, и случилась довольно странная загвоздка, пока непонятная мне. Голова уже кипит, если честно, поэтому прошу прощения, что снова обращаюсь к вам.

При переходе с домашней страницы на любой роут, срабатывает нужная анимация. При переходе с любого роута на какой-либо другой - срабатывает вообще левая анимация (смещение вниз). Это какое-то стандартное поведение или что(

[0xD34F]

AndrewRusinas, я не телепат и не ясновидящий. Воспроизведите свою ситуацию в песочнице.