Переходы маршрутизации Vue — это быстрый и простой способ персонализации программ Vue. Позволяет добавлять плавные анимации и переходы между разными страницами программы. При правильном использовании это может сделать вашу программу более профессиональной, тем самым улучшив взаимодействие с пользователем.
В этой статье я расскажу об основах маршрутизации переходов с помощью Vue, а затем приведу несколько примеров, которые вдохновят вас. Вот один из случаев:
Добавить маршрутизацию в программу Vue
Общая настройка маршрутизации Vue выглядит так:
<template>
<router-view />
</template>
В старых версиях маршрутизации Vue мы могли просто использовать<transition>Упаковка компонентов<router-view>.
Однако в более новых версиях маршрутизации Vue вы должны использоватьv-slotчтобы разобрать пропсы и передать их в наш внутренний слот. Он будет содержать динамический компонент, окруженный переходным компонентом.
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
Добавляйте переходы к маршрутам
По умолчанию с<transition>пакет<component>добавит один и тот же переход на каждый маршрут в вашем приложении.
Переходы можно настроить для каждого маршрута двумя способами.
Переместите переход в каждый компонент
Во-первых, вместо того, чтобы оборачивать наши динамические компоненты переходными компонентами, мы можем<transition>Перейдите к каждому отдельному компоненту. так:
<template>
<transition>
<div class="wrapper">
<!-- -->
</div>
</transition>
</template>
И так далее, чтобы каждый маршрут был переходным для обработки. Так что вы можете настроить каждый маршрут, изменив имя перехода.
Динамические переходы с v-bind
Другой способ — привязать имя перехода к переменной. Затем вы можете динамически изменять эту переменную в соответствии с вашим собственным путем.
Вот пример из документации маршрутизации Vue. Динамически устанавливается с режимом часов на текущем маршрутеtransitionNameПеременная.
<transition :name="transitionName">
<component :is="Component" />
</transition>
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
Теперь, когда мы понимаем основы переходов маршрутизации Vue, давайте рассмотрим несколько примеров.
#1 – Градиентные переходы
Градиентные переходы страниц должны быть самым прямым видом движения. Этого можно добиться, изменив прозрачность элемента.
Во-первых, создайте переход под названием fade. Обратите внимание, что режим перехода установлен наout-in.
Всего существует 3 режима перехода:
- по умолчанию: переходы нарастания и затухания происходят одновременно
- in-out: новые элементы исчезают первыми. Затем текущий элемент исчезает.
- out-in: Текущий элемент исчезает первым. Затем новый элемент начинает исчезать.
Чтобы новый элемент появлялся плавно, нам нужно удалить текущий элемент перед началом нового перехода. поэтому должен использоватьmode = "out-in".
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
<transition>Чтобы обеспечить несколько классов CSS, их можно динамически добавлять или удалять во время цикла анимации.
Есть 6. разные классы перехода (3 для нарастания, 3 для затухания).
-
v-enter-from/v-leave-from: начальное состояние перехода, удалите его после начала перехода -
v-enter-active/v-leave-active: активное состояние перехода -
v-enter-to/v-leave-to: конечное состояние перехода
Наш переход затухания имеет функцию, называемуюfade-enter-fromтип.
Мы хотим, чтобы прозрачность состояний появления и исчезновения была равна 0. Затем, когда переход активен, я хочу анимировать прозрачность.
Нам даже не нужно устанавливать непрозрачность на 1, так как она удаляется во время анимации.fade-enter-fromа такжеfade-leave-toДобрый. Это анимирует сам элемент с непрозрачностью по умолчанию, равной 1.
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
С некоторыми фиктивными компонентами это окончательный эффект перехода.
#2 – Слайд-переходы
Далее идет переход со слайдом страницы.
Шаблон будет следующим. Поскольку мы хотим, чтобы переходы нарастания и затухания происходили одновременно, мы не хотим устанавливать специальный режим для перехода.
<router-view v-slot="{ Component }">
<transition name="slide">
<component :is="Component" />
</transition>
</router-view>
Чтобы пример было проще понять, я сделал каждый компонент шириной 100% и занимал как минимум 1 vh, а также задал отдельно цвет фона.
.wrapper {
width: 100%;
min-height: 100vh;
}
Окончательный стиль перехода будет анимировать абсолютное положение перемещаемого компонента. Если вам нужно другое направление смахивания, просто измените свойство CSS, которое вы хотите установить (top, bottom, left, right).
.slide-enter-active,
.slide-leave-active {
transition: all 0.75s ease-out;
}
.slide-enter-to {
position: absolute;
right: 0;
}
.slide-enter-from {
position: absolute;
right: -100%;
}
.slide-leave-to {
position: absolute;
left: -100%;
}
.slide-leave-from {
position: absolute;
left: 0;
}
Вот окончательный эффект:
#3 – Масштабные переходы
Масштабные переходы очень похожи на градиентные переходы. Также необходимо установить режимout-in, что обеспечивает правильный порядок анимаций.
<router-view v-slot="{ Component }">
<transition name="scale" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
Затем измените прозрачность элемента с помощью стилей иtransform: scale.
.scale-enter-active,
.scale-leave-active {
transition: all 0.5s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}
Чтобы этот переход выглядел чище, установите черный цвет фона всей веб-страницы.
Вот окончательный эффект:
#4 – Объединение переходов
Существует много эффектов перехода, и обычной практикой является объединение некоторых основных переходов, таких как объединение слайд-шоу и масштабирования, в один переход.
<router-view v-slot="{ Component }">
<transition name="scale-slide">
<component :is="Component" />
</transition>
</router-view>
.scale-slide-enter-active,
.scale-slide-leave-active {
position: absolute;
transition: all 0.85s ease;
}
.scale-slide-enter-from {
left: -100%;
}
.scale-slide-enter-to {
left: 0%;
}
.scale-slide-leave-from {
transform: scale(1);
}
.scale-slide-leave-to {
transform: scale(0.8);
}
Это конечный эффект
Это выглядит довольно хорошо.
#5 – Пишите в конце
Недавно в процессе улучшения Vue я нашел качественный туториал по Vue3+TS. Бесплатно поделиться с копателями,Нажмите на меня, чтобы увидеть учебник