Переходы появления

В библиотеке Vuetify анимации появления элементов управляются через механизм переходов (transitions). Эти переходы позволяют создавать плавное появление и исчезновение компонентов, улучшая визуальную динамику интерфейса. Vuetify предоставляет встроенные переходы, а также возможность создания собственных.

Компонент <transition>

В основе работы анимаций лежит стандартный Vue-компонент <transition>. Он оборачивает элемент или компонент и применяет к нему CSS-классы для различных этапов анимации:

<template>
  <transition name="fade">
    <v-btn v-if="showButton">Нажми меня</v-btn>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showButton: false
    };
  }
};
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave-from {
  opacity: 1;
}
</style>

Ключевые моменты:

  • .fade-enter-from – начальное состояние при появлении
  • .fade-enter-to – конечное состояние при появлении
  • .fade-leave-from – начальное состояние при исчезновении
  • .fade-leave-to – конечное состояние при исчезновении
  • .fade-enter-active и .fade-leave-active – применяются на протяжении всей анимации

Встроенные переходы Vuetify

Vuetify поставляется с набором готовых переходов, которые упрощают задачу:

  • v-fade-transition – плавное появление с изменением прозрачности
  • v-scale-transition – масштабирование при появлении/исчезновении
  • v-slide-x-transition / v-slide-y-transition – сдвиг по горизонтали или вертикали
  • v-expand-transition – изменение размера по высоте, полезно для раскрывающихся блоков

Пример использования встроенного перехода:

<template>
  <v-fade-transition>
    <v-card v-if="showCard" class="pa-4">
      Контент карточки
    </v-card>
  </v-fade-transition>
</template>

<script>
export default {
  data() {
    return {
      showCard: true
    };
  }
};
</script>

Пользовательские переходы

Vuetify позволяет создавать собственные переходы с помощью компонента <v-expand-transition> или базового <transition> с кастомными классами. Это дает полный контроль над анимацией.

Пример пользовательского масштабирования:

<template>
  <transition name="scale-up">
    <v-alert v-if="showAlert" type="success">Успешная операция</v-alert>
  </transition>
</template>

<style>
.scale-up-enter-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.scale-up-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.scale-up-enter-from {
  transform: scale(0.8);
  opacity: 0;
}
.scale-up-enter-to {
  transform: scale(1);
  opacity: 1;
}
.scale-up-leave-from {
  transform: scale(1);
  opacity: 1;
}
.scale-up-leave-to {
  transform: scale(0.8);
  opacity: 0;
}
</style>

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

Для списков и повторяющихся компонентов применяется <transition-group>. Он поддерживает анимацию появления, исчезновения и перемещения элементов:

<template>
  <transition-group name="list-fade" tag="div">
    <v-chip
      v-for="item in items"
      :key="item.id"
      class="ma-2"
    >
      {{ item.text }}
    </v-chip>
  </transition-group>
</template>

<style>
.list-fade-enter-active, .list-fade-leave-active {
  transition: all 0.5s ease;
}
.list-fade-enter-from, .list-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
.list-fade-enter-to, .list-fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}
</style>

Особенности:

  • tag="div" задает контейнер для группы элементов
  • Каждый элемент списка должен иметь уникальный key
  • Анимация применяется ко всем элементам одновременно или при добавлении/удалении

Управление временем анимации

Свойство mode у <transition> позволяет контролировать порядок анимаций при замене элементов:

  • in-out – сначала анимация входа, затем выход
  • out-in – сначала анимация выхода, затем вход
<transition name="fade" mode="out-in">
  <component :is="currentComponent" />
</transition>

duration можно задавать как через CSS (transition-duration), так и через JS-хуки для более сложной логики.

Заключение по применению

Использование переходов появления в Vuetify позволяет:

  • Создавать плавные визуальные эффекты без сторонних библиотек
  • Управлять динамическими компонентами и списками
  • Создавать собственные уникальные анимации через CSS или JS-хуки

Грамотное применение встроенных и кастомных переходов делает интерфейсы более живыми и приятными для пользователя, поддерживая современные стандарты UX.

Оглавление