Переходы масштабирования

Vuetify предоставляет широкий набор инструментов для создания визуально привлекательных интерфейсов с плавными анимациями. Одним из ключевых компонентов анимаций являются переходы масштабирования, которые позволяют изменять размеры элементов с эффектом плавного увеличения или уменьшения. В библиотеке Vuetify эти переходы реализованы через встроенные компоненты <v-scale-transition> и <v-expand-transition>.

Основной компонент <v-scale-transition>

Компонент <v-scale-transition> предназначен для плавного изменения масштаба элемента при его появлении или исчезновении. Он работает аналогично стандартным Vue-трансишенам, но обеспечивает готовую анимацию увеличения и уменьшения.

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

<template>
  <v-btn @click="show = !show">Показать/Скрыть блок</v-btn>
  
  <v-scale-transition>
    <div v-if="show" class="scale-box">
      Масштабируемый блок
    </div>
  </v-scale-transition>
</template>

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

<style>
.scale-box {
  width: 200px;
  height: 100px;
  background-color: #1976d2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
}
</style>

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

  • v-if контролирует появление или исчезновение элемента.

  • <v-scale-transition> автоматически добавляет CSS-классы для анимации:

    • .v-enter-from, .v-enter-to – при появлении;
    • .v-leave-from, .v-leave-to – при скрытии.

  • Переход реализуется через свойство transform: scale(), создавая эффект увеличения или уменьшения.

Настройка длительности и кривой анимации

Vuetify позволяет изменять продолжительность и тайминг-функцию анимации через свойства компонента или кастомные классы.

Пример кастомной настройки:

<v-scale-transition
  enter-active-class="custom-enter"
  leave-active-class="custom-leave"
>
  <div v-if="show" class="scale-box">Блок с кастомной анимацией</div>
</v-scale-transition>

<style>
.custom-enter {
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.custom-leave {
  transition: transform 0.4s ease-in-out;
}
</style>

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

  • Свойство transition задает длительность и кривую анимации.
  • Кастомные классы позволяют создавать нестандартные эффекты, например, пружинистое увеличение или замедленное исчезновение.

Использование с динамическим контентом

Переходы масштабирования идеально подходят для работы с элементами, добавляемыми динамически в DOM, например, карточками списка или всплывающими уведомлениями.

<template>
  <v-btn @click="addCard">Добавить карточку</v-btn>
  
  <v-scale-transition-group>
    <div
      v-for="card in cards"
      :key="card.id"
      class="scale-card"
    >
      {{ card.text }}
    </div>
  </v-scale-transition-group>
</template>

<script>
export default {
  data() {
    return {
      cards: [],
      nextId: 1
    }
  },
  methods: {
    addCard() {
      this.cards.push({ id: this.nextId++, text: `Карточка ${this.nextId}` });
    }
  }
}
</script>

<style>
.scale-card {
  width: 180px;
  height: 80px;
  background-color: #4caf50;
  margin: 8px;
  border-radius: 6px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

Пояснения:

  • <v-scale-transition-group> работает с коллекциями, обеспечивая плавное масштабирование при добавлении и удалении элементов.
  • Каждому элементу необходимо задавать уникальный key для корректной анимации.
  • Анимация комбинируется с другими CSS-трансформациями, если нужно изменить одновременно прозрачность и масштаб.

Интеграция с другими эффектами Vuetify

Компоненты переходов масштабирования можно комбинировать с другими эффектами Vuetify, например:

  • Прозрачность: добавление v-fade-transition внутри или снаружи <v-scale-transition> для создания эффекта одновременного увеличения и появления.
  • Перемещение: совместная работа с <v-slide-y-transition> для появления элемента с масштабированием и смещением.
<v-scale-transition>
  <v-fade-transition>
    <div v-if="show" class="combined-effect">
      Комбинированная анимация
    </div>
  </v-fade-transition>
</v-scale-transition>

Рекомендации по производительности

  • Для большого количества элементов использовать v-scale-transition-group вместо отдельных <v-scale-transition>, чтобы минимизировать перерисовки DOM.
  • Ограничивать сложные трансформации и тени на элементах, которые масштабируются, чтобы избежать просадок FPS.
  • Для мобильных устройств использовать упрощенные кривые анимации, чтобы обеспечить плавность при низкой мощности устройства.

Советы по стилю и UX

  • Масштабирование лучше применять к карточкам, кнопкам, всплывающим уведомлениям, где визуальный акцент необходим.
  • Слишком резкое увеличение или слишком долгое исчезновение может вызвать ощущение “тормозного” интерфейса, поэтому длительность анимации рекомендуется держать в диапазоне 0.2–0.6 секунд.
  • Комбинирование масштаба и прозрачности создает более естественный и современный визуальный эффект.

Переходы масштабирования в Vuetify предоставляют гибкий и мощный инструмент для создания динамичных, отзывчивых и визуально привлекательных интерфейсов, позволяя легко контролировать эффект появления и исчезновения элементов на странице.

Оглавление