Переходы между маршрутами и анимация
RouterView с Transition, transition-name на основе маршрута, скольжение и затухание при переходе между маршрутами
«Переходы между маршрутами и анимация» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Анимация переходов между маршрутами
При изменении URL совпавший компонент заменяется мгновенно. Обернув представление в Vue-компонент Transition, можно плавно растворять или сдвигать страницы.
RouterView с v-slot
Для анимации нужен доступ к разрешённому компоненту. Форма слота с областью видимости у RouterView предоставляет Component и route.
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>Обертывание в Transition
Разместите Transition вокруг динамического component. Vue применяет классы входа и выхода при монтировании и размонтировании компонента маршрута.
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Почему mode out-in?
Без mode старая и новая страницы анимируются одновременно и перекрываются. mode="out-in" ждёт, пока старая страница выйдет, прежде чем начать вход новой.
Определение CSS
Значение name становится префиксом класса CSS. Определите переходы входа и выхода для эффекта растворения.
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>Переход для маршрута через метаданные
Сохраните название перехода в meta маршрута, чтобы разные маршруты анимировались по-разному — например, один раздел сдвигался, а другой растворялся.
{ path: '/about', component: About, meta: { transition: 'slide' } }Вычисление названия перехода
Прочитайте route.meta.transition из слота и привяжите его к имени Transition, предусмотрев значение по умолчанию.
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Сдвиги с учётом направления
Можно выбирать переход динамически в зависимости от направления навигации — например, сдвигать страницу влево при переходе вперёд и вправо при возврате, сравнивая глубину маршрутов в охраннике.
Вход и выход при сдвиге
Сдвиг сочетает прозрачность и трансформацию. Переместите входящую страницу справа, а уходящую — влево.
<style>
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>Ключ для изменений параметров
Если два маршрута используют один и тот же компонент (например, /user/1 и /user/2), Vue повторно использует его и пропускает переход. Добавьте :key к пути маршрута, чтобы принудительно выполнить повторную отрисовку и анимацию.
<component :is="Component" :key="route.path" />Учет предпочтения уменьшенного движения
Для доступности отключайте анимации, если пользователь предпочитает уменьшенное движение, используя медиазапрос CSS.
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>Быстрая проверка
Проверьте свои знания о переходах между маршрутами.
Итоги
Вы научились анимировать маршруты:
- Используйте RouterView с v-slot, чтобы получить Component и route.
- Оберните component :is в Transition и используйте mode="out-in".
- Определяйте CSS входа и выхода на основе названия перехода.
- Читайте route.meta.transition для анимации отдельных маршрутов; добавляйте :key для общих компонентов.
Часто задаваемые вопросы
Урок «Переходы между маршрутами и анимация» бесплатный?
Да — полный текст урока «Переходы между маршрутами и анимация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переходы между маршрутами и анимация»?
RouterView с Transition, transition-name на основе маршрута, скольжение и затухание при переходе между маршрутами Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Переходы между маршрутами и анимация»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Мета-поля маршрутов и типизация
- Переходы между маршрутами и анимация
- Настройка поведения прокрутки
- Программная навигация и useRouter