CSS анимации и keyframes

Vue.js предоставляет удобный механизм для интеграции CSS-анимаций в компоненты с помощью встроенной директивы <transition>. Анимации позволяют плавно изменять состояние элементов при их появлении, исчезновении или изменении данных. Использование CSS-анимаций снижает нагрузку на JavaScript и делает интерфейс более отзывчивым.

Директива <transition>

<transition> оборачивает элемент или компонент и автоматически добавляет соответствующие CSS-классы на разных этапах жизненного цикла анимации:

  • v-enter-from — начальное состояние элемента перед появлением.
  • v-enter-active — активное состояние во время анимации появления.
  • v-enter-to — конечное состояние элемента после завершения анимации.
  • v-leave-from — начальное состояние элемента перед исчезновением.
  • v-leave-active — активное состояние во время анимации исчезновения.
  • v-leave-to — конечное состояние элемента после исчезновения.

Например:

<template>
  <transition name="fade">
    <div v-if="show" class="box"></div>
  </transition>
</template>

<style>
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #42b983;
}
</style>

Использование keyframes

Для более сложных анимаций применяются @keyframes. Это позволяет задавать промежуточные состояния и создавать плавные переходы сложной формы.

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    transform: translateY(10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-enter-active {
  animation: slideDown 0.7s ease forwards;
}

.slide-leave-active {
  animation: slideUp 0.7s ease forwards;
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

Анимацию можно интегрировать с <transition>:

<transition name="slide">
  <div v-if="show" class="panel">Контент</div>
</transition>

Комбинация CSS-переходов и keyframes

Часто применяют сочетание плавных CSS-переходов для мелких изменений и keyframes для крупных визуальных эффектов. Например, изменение размеров и перемещение элемента:

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.bounce-enter-active {
  animation: bounce 0.6s ease;
}

.bounce-leave-active {
  transition: transform 0.5s, opacity 0.5s;
  opacity: 0;
  transform: translateY(50px);
}

Анимации при динамических компонентах

Vue.js поддерживает анимацию при смене компонентов с помощью <transition> и <transition-group>:

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

Применяются классы:

  • list-enter-from / list-leave-to — начальные и конечные состояния.
  • list-enter-active / list-leave-active — активное состояние анимации.
  • list-move — класс для плавного перемещения элементов внутри группы.
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-move {
  transition: transform 0.5s;
}

Практические рекомендации

  • Для сложных анимаций использовать @keyframes, так как они позволяют контролировать промежуточные состояния.
  • Для мелких изменений достаточно CSS-переходов через transition.
  • Всегда задавать forwards или backwards в keyframes, чтобы сохранить конечное состояние после завершения анимации.
  • При анимации списков применять <transition-group> с уникальными key, иначе Vue не сможет корректно отслеживать изменения.

Использование CSS-анимаций в Vue.js обеспечивает производительные, визуально плавные интерфейсы без необходимости управлять состояниями анимаций вручную через JavaScript.

Оглавление