Анимация списков

Vuetify предоставляет мощные инструменты для создания анимации элементов списка, опираясь на возможности Vue Transition API и собственные компоненты, такие как v-list, v-list-item и вспомогательные утилиты для плавного появления, исчезновения и перемещения элементов. Анимация списков делает интерфейс более динамичным и отзывчивым, улучшая пользовательский опыт.

Компонент v-list и базовые переходы

Основным контейнером для списков является v-list. В стандартном виде он отображает элементы без анимации, однако при использовании v-for с transition-group можно добавить анимацию появления и исчезновения:

<template>
  <v-list>
    <transition-group name="list-fade" tag="div">
      <v-list-item
        v-for="item in items"
        :key="item.id"
      >
        <v-list-item-content>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </transition-group>
  </v-list>
</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(-10px);
}
</style>

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

  • Атрибут key обязателен для корректной работы анимации, чтобы Vue отслеживал изменения элементов.
  • Селекторы *-enter-* и *-leave-* определяют начальное и конечное состояние анимации.
  • Свойство transition управляет продолжительностью и кривой изменения.

Использование v-slide-y-transition и v-fade-transition

Vuetify предлагает готовые переходы, которые упрощают работу с анимацией списков:

<template>
  <v-list>
    <v-slide-y-transition>
      <v-list-item v-for="item in items" :key="item.id">
        <v-list-item-content>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-slide-y-transition>
  </v-list>
</template>

Особенности готовых переходов:

  • v-slide-y-transition – вертикальное скольжение элементов при добавлении и удалении.
  • v-fade-transition – плавное появление и исчезновение через изменение прозрачности.
  • Можно комбинировать с кастомными стилями для создания сложных эффектов.

Анимация при сортировке и фильтрации

Когда список изменяет порядок элементов или применяется фильтр, стандартная анимация появления недостаточна. Для этого применяют transition-group с эффектом перемещения:

<template>
  <v-list>
    <transition-group name="list-move" tag="div">
      <v-list-item v-for="item in sortedItems" :key="item.id">
        <v-list-item-content>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </transition-group>
  </v-list>
</template>

<style>
.list-move-move {
  transition: transform 0.4s ease;
}
</style>
  • Класс *-move автоматически применяется Vue при изменении позиции элемента.
  • В сочетании с CSS transitions можно создать эффект плавного перемещения элементов при сортировке или динамическом фильтре.

Динамическое добавление и удаление элементов

Для динамических списков важно правильно обрабатывать появление новых элементов и исчезновение старых:

<template>
  <v-list>
    <v-fade-transition>
      <v-list-item v-for="item in items" :key="item.id">
        <v-list-item-content>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-fade-transition>
  </v-list>

  <v-btn @click="addItem">Добавить элемент</v-btn>
  <v-btn @click="removeItem">Удалить элемент</v-btn>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Элемент 1' },
        { id: 2, name: 'Элемент 2' },
      ]
    }
  },
  methods: {
    addItem() {
      const nextId = this.items.length + 1;
      this.items.push({ id: nextId, name: `Элемент ${nextId}` });
    },
    removeItem() {
      this.items.pop();
    }
  }
}
</script>
  • Метод push добавляет элемент в конец списка, pop удаляет последний.
  • Переходы обрабатывают изменение массива автоматически, если используется корректная обертка transition или готовый Vuetify переход.

Комбинирование переходов с задержкой и последовательностью

Для более выразительной анимации можно использовать стилевую задержку и псевдоэлементы:

.list-fade-enter-active {
  transition: all 0.4s ease;
}
.list-fade-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}
.list-fade-enter-to {
  opacity: 1;
  transform: translateX(0);
}
.list-fade-enter-active > * {
  transition-delay: calc(var(--index) * 50ms);
}
  • Для каждого элемента можно задавать индивидуальную задержку через CSS-переменные.
  • Эффект создаёт последовательное появление элементов, что визуально привлекает внимание и улучшает восприятие.

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

  • Всегда использовать уникальный key для элементов списка.
  • Предпочтительнее использовать готовые переходы Vuetify (v-slide-y-transition, v-fade-transition) для простых эффектов.
  • Для сложной анимации лучше комбинировать transition-group с кастомными стилями CSS.
  • При динамическом изменении списка анимация делает интерфейс плавным и помогает пользователю отслеживать изменения.

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

Оглавление