Vue Academy · Урок

Компонент Transition

v-enter-from, v-enter-active, v-enter-to, классы v-leave-*, свойство name для пользовательских классов

«Компонент Transition» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Что делает компонент Transition

Vue предоставляет встроенный компонент <Transition>, который применяет анимации входа и выхода к одному элементу или компоненту, когда тот добавляется или удаляется с помощью v-if или v-show.

Сам он не создаёт дополнительный элемент DOM — компонент только управляет CSS-классами и временем их применения у дочернего элемента.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Только один элемент

<Transition> ожидает ровно одного непосредственного дочернего элемента. Обёртка для нескольких соседних элементов не сработает — для списков используйте <TransitionGroup>.

Дочерний элемент должен переключаться с помощью v-if, v-show или динамического компонента.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

Шесть классов перехода

Во время входа или выхода Vue автоматически добавляет и удаляет шесть классов в определённой последовательности.

v-enter-from / v-leave-from — начальное состояние
v-enter-active / v-leave-active — активная фаза (здесь указывается переход)
v-enter-to / v-leave-to — конечное состояние

/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Именование перехода

Передайте переходу свойство name, чтобы префикс классов изменился с v- на указанное имя. При name="fade" классы будут называться fade-enter-from, fade-enter-active и так далее.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

Полный пример плавного появления

Классическая анимация плавного появления изменяет opacity. Элемент начинается полностью прозрачным, активный класс задаёт переход, а конечный класс доводит его до полной непрозрачности.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

Последовательность входа по шагам

Когда элемент добавляется:

fade-enter-from и fade-enter-active добавляются до отрисовки (непрозрачность равна 0).
В следующем кадре fade-enter-from удаляется, а fade-enter-to добавляется, поэтому непрозрачность плавно меняется к 1.
Когда переход завершается, классы active и to удаляются.

/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

Последовательность выхода

Выход происходит так же, как вход, но используются классы leave. Часто одно и то же активное правило повторно используется для обоих направлений.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

v-if и v-show

Оба механизма запускают переходы. v-if действительно монтирует и размонтирует элемент, а v-show оставляет его в DOM и переключает display. Для v-show Vue управляет изменением отображения вокруг активной фазы, поэтому анимация остаётся видимой.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

Появление при первоначальной отрисовке

По умолчанию переход не запускается при первой отрисовке. Добавьте свойство appear, чтобы анимация входа воспроизводилась при первом монтировании компонента.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

Переход между двумя элементами

Используйте v-if / v-else внутри одного Transition, чтобы менять два элемента. Если у них один и тот же тег, задайте каждому уникальный key, чтобы Vue воспринимал их как разные элементы.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Уменьшение анимации и доступность

Учитывайте предпочтения пользователей, которым нужно меньше движения. Отключайте или сокращайте переходы с помощью медиазапроса prefers-reduced-motion, чтобы анимации не вызывали дискомфорт.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Быстрая проверка

Что определяет fade-enter-from

Итоги

Вы изучили встроенный компонент <Transition>: он оборачивает один элемент, переключаемый с помощью v-if/v-show, применяет шесть CSS-классов (enter-from, enter-active, enter-to и соответствующие классы выхода), поддерживает префикс name, свойство appear для первой отрисовки и mode для переключений.

Часто задаваемые вопросы

Урок «Компонент Transition» бесплатный?

Да — полный текст урока «Компонент Transition» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Компонент Transition»?

v-enter-from, v-enter-active, v-enter-to, классы v-leave-*, свойство name для пользовательских классов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Компонент Transition»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy