Как сделать анимацию при переходе во vue?

Question

[WebDev]

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

Answer 1

[Evgeny Kulakov]

У transition есть аттрибут mode="out-in" как раз для таких целей.

Comments

[WebDev]

Подскажите, пожалуйста. Добавил out-in, теперь вторая появляется не резко, а выезжает, но выезжать она начинает все равно только после того, как первая уедет полностью. Как можно сделать, чтоб она не дожидалась окончания первой анимации?

[Алексей Ярков]

WebDev: вы бы запилили демку на webpackbin, а мы бы подсказали

[Evgeny Kulakov]

WebDev: наврал я кажется) Тут вроде стандартный transition подойдет, просто вашим элементам нужно абсолютное позиционирование задать.

[WebDev]

Evgeny Kulakov: Алексей Ярков: Вынес тот же код в этот сервис, совсем перестала работать(

https://www.webpackbin.com/bins/-KsFg0ohou_VCSTpGcUo

Я использую несколько тегов transition, так ведь можно? Если я хочу разные эффекты?

[Evgeny Kulakov]

WebDev: https://www.webpackbin.com/bins/-KsFksybfo1FXpqePfmo

[WebDev]

Evgeny Kulakov: Огромное спасибо!

[WebDev]

Evgeny Kulakov: Подскажите, пожалуйста, возможно ли добавить третий слайд?

https://www.webpackbin.com/bins/-KsFg0ohou_VCSTpGcUo

Первый уезжает налево, третий направо, а второй, получается, должен уметь и туда и туда уезжать. В голову приходит только менять второму слайду класс при переходе на первый и третий. Может можно как-то проще?

[Evgeny Kulakov]

WebDev: по сути это у вас слайдер получается. Я бы взял готовое решение. Вот велосипед на транзишенах: https://www.webpackbin.com/bins/-KsIFDW4tTskcG_NoRBl
Но правильнее имхо как обычно слайдер делают: врапер, скрывающий все кроме текущего слайда, в нем слой с последовательно расположенными страницами, при клике на кнопки перемещаем слой на нужный слайд.

[WebDev]

Evgeny Kulakov: Спасибо большое за помощь!

Answer 2

[Alexander]

Вам нужен раздел Анимационные эффекты переходов из документации, в частности пункт про классы переходов.

v-enter-active и v-leave-active дают возможность указать различные анимационные эффекты для переходов появления и исчезновения элемента.

Суть в том, что вам надо описать анимацию появления, исчезновения и промежуточных стадий компонента специальными классами, которых всего 6. Если ваша анимация называется fade, то имена классов будут: fade-enter-active, fade-leave-active и т.д.

Возьмите какой-нибудь готовый пример (или модифицируйте свой) и поковыряйте css-свойства в нём, потренируйтесь.

Вот есть хороший пример.