Vue Academy · Урок

Переходы и анимации CSS

Свойство transition в CSS, покадровые анимации, использование Animate.css с Vue Transition

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

Два способа анимации в CSS

CSS предоставляет два инструмента, которые отлично сочетаются с переходами Vue: свойство transition (интерполяция между двумя состояниями) и @keyframes с animation (многоэтапная временная шкала). Vue может управлять обоими.

Сокращённая запись transition

Сокращённая запись transition объединяет свойство, длительность, функцию времени и задержку в одной строке. Порядок такой: свойство, длительность, функция плавности, задержка.

.box {
  /* property duration easing delay */
  transition: transform 0.4s ease-in-out 0s;
}

Переход для нескольких свойств

Разделяйте несколько переходов запятыми. Можно одновременно анимировать трансформацию и прозрачность, создавая эффект скольжения с плавным появлением.

.slide-enter-active,
.slide-leave-active {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.slide-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

Когда перехода недостаточно

transition анимирует только переход между двумя состояниями. Для подпрыгивания, пульсации или многоэтапного движения нужны @keyframes, которые позволяют определить множество промежуточных точек.

Определение ключевых кадров

@keyframes задаёт последовательность состояний с помощью процентов (или from/to). Каждая точка описывает стили на соответствующем этапе временной шкалы.

@keyframes bounce-in {
  0% { transform: scale(0); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

Свойство animation

Применяйте набор ключевых кадров с помощью сокращённой записи animation: имя, длительность, функция времени, задержка, число повторений и направление.

.bounce-enter-active {
  animation: bounce-in 0.5s ease both;
}

Подключение ключевых кадров к переходу

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

.bounce-leave-active {
  animation: bounce-in 0.5s ease reverse both;
}

Использование Animate.css

Animate.css — библиотека готовых анимаций на основе ключевых кадров. Вместо написания собственных классов сообщите Vue использовать классы Animate.css напрямую с помощью свойств пользовательских классов.

<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->

Классы enter-active-class и leave-active-class

<Transition> принимает свойства, позволяющие заменить сгенерированные имена классов. enter-active-class и leave-active-class позволяют подключить любой внешний класс — это идеально подходит для Animate.css.

<Transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated by Animate.css</div>
</Transition>

Явная настройка длительности

Если время CSS неоднозначно (одновременно используются анимация и переход), задайте свойство duration, чтобы Vue точно знал, когда удалять классы. Оно принимает число или объект с параметрами входа и выхода.

<Transition :duration="{ enter: 500, leave: 300 }">
  <div v-if="show">Precise timing</div>
</Transition>

Важность функций плавности

Функция времени определяет характер движения. ease-out создаёт отзывчивое ощущение при входе, ease-in — при выходе, а cubic-bezier() даёт полный контроль.

.pop-enter-active {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

Какое свойство позволяет применить класс Animate.css во время входа?

Повторение

Вы сравнили сокращённую запись transition (интерполяция между двумя состояниями) с @keyframes и animation (многоэтапные временные шкалы), а также научились подключать Animate.css через свойства enter-active-class и leave-active-class, используя duration для точной настройки времени.

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

Урок «Переходы и анимации CSS» бесплатный?

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

Чему я научусь в уроке «Переходы и анимации CSS»?

Свойство transition в CSS, покадровые анимации, использование Animate.css с Vue Transition Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Переходы и анимации CSS»?

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

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

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

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

← Назад к Vue Academy