Переходы скольжения

Vuetify предоставляет богатый набор инструментов для реализации анимаций и переходов, среди которых ключевую роль играют переходы скольжения (v-slide-x-transition, v-slide-y-transition). Эти компоненты позволяют плавно изменять положение элементов в DOM при их появлении или скрытии, создавая ощущение движения и улучшая восприятие интерфейса пользователем.

Переходы скольжения в Vuetify реализованы на базе компонента <transition> из Vue.js, но имеют встроенные стили и возможности для вертикальной и горизонтальной анимации.

Компоненты переходов скольжения

Vuetify предлагает следующие базовые компоненты для скольжения:

  1. v-slide-x-transition – скольжение по горизонтали.

    • Направления движения задаются через атрибуты mode и порядок рендеринга элементов.
    • Элемент появляется, сдвигаясь слева направо или справа налево.

  2. v-slide-y-transition – скольжение по вертикали.

    • Используется для появления элементов сверху вниз или снизу вверх.
    • Особенно удобен для всплывающих уведомлений или раскрывающихся панелей.

  3. v-slide-x-reverse-transition и v-slide-y-reverse-transition – зеркальные варианты стандартных переходов, где движение происходит в противоположном направлении.

Все эти компоненты оборачивают контент, который должен участвовать в анимации, и автоматически применяют CSS-переходы при добавлении или удалении элементов из DOM.

Применение в шаблоне

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

<template>
  <v-btn @click="show = !show">Toggle</v-btn>
  <v-slide-x-transition>
    <v-card v-if="show" class="pa-4" color="blue lighten-2">
      Контент для скольжения
    </v-card>
  </v-slide-x-transition>
</template>

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

Объяснение:

  • v-if контролирует присутствие элемента в DOM.
  • v-slide-x-transition автоматически применяет CSS-анимацию скольжения при его появлении или исчезновении.
  • Состояние show переключает видимость компонента.

Настройка скорости и кривых анимации

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

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

<v-slide-y-transition
  enter-active-class="custom-enter"
  leave-active-class="custom-leave"
>
  <v-alert v-if="visible" type="success">Успешное действие</v-alert>
</v-slide-y-transition>

<style>
.custom-enter {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-leave {
  transition: transform 0.5s ease-in;
}
</style>

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

  • enter-active-class и leave-active-class позволяют полностью контролировать стиль анимации.
  • transform отвечает за сдвиг элемента при скольжении.
  • Использование кривых cubic-bezier или ease-in-out делает анимацию более естественной.

Комбинирование переходов и динамических списков

Для динамических списков, где элементы добавляются и удаляются, скольжения работают совместно с v-for и key:

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

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

  • v-slide-y-transition-group обрабатывает несколько элементов одновременно.
  • key обязателен для корректного расчёта анимации появления и исчезновения.
  • Переходы учитывают порядок добавления и удаления элементов, создавая плавное движение списка.

Взаимодействие с другими эффектами

Скольжения можно комбинировать с fade или scale для более сложных эффектов:

<v-scale-transition>
  <v-slide-y-transition>
    <v-card v-if="visible" class="pa-3" color="pink lighten-3">
      Комбинированный эффект
    </v-card>
  </v-slide-y-transition>
</v-scale-transition>
  • Элемент сначала меняет размер (масштабируется), затем появляется через скольжение.
  • Такая комбинация усиливает визуальное восприятие интерфейса и делает его более динамичным.

Особенности работы на мобильных устройствах

  • Переходы скольжения не вызывают мерцания и хорошо оптимизированы для GPU-ускорения через transform: translate3d.
  • Для плавной работы рекомендуется избегать анимации тяжелых компонентов внутри перехода.
  • При необходимости анимации сложных структур лучше разбивать их на отдельные v-slide-transition компоненты.

Советы по использованию

  • Минимизировать DOM-изменения: слишком частое добавление/удаление элементов может снизить производительность.
  • Использовать v-show вместо v-if, если нужно скрывать элементы без удаления их из DOM, чтобы скольжение было мгновенным.
  • Комбинировать с цветовыми и теневыми эффектами для улучшения визуального восприятия.
  • Тестировать на разных разрешениях и устройствах, особенно при вертикальных скольжениях для уведомлений и панели навигации.

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

Оглавление