Анимации и transitions

Quasar Framework предоставляет мощный набор инструментов для работы с анимациями и переходами (transitions) в приложениях на Vue.js. Анимации позволяют улучшить пользовательский опыт, делая интерфейс более динамичным и отзывчивым. В Quasar они реализуются через встроенные компоненты, классы и директивы.

Основные принципы работы с переходами

В основе работы анимаций в Quasar лежит стандарт Vue.js <transition> и <transition-group>. Quasar расширяет эти возможности, предлагая готовые эффекты и утилиты.

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

  • v-show и v-if часто используются вместе с переходами для плавного появления и скрытия элементов.
  • Переходы могут быть применены к отдельным компонентам или группам элементов через <transition-group>.
  • Каждый переход имеет имя, по которому Quasar подбирает соответствующие CSS-классы для анимации.

Пример базового перехода с Quasar:

<template>
  <q-btn label="Показать текст" @click="visible = !visible" />
  <transition name="fade">
    <div v-if="visible" class="q-pa-md q-mt-md bg-primary text-white">
      Плавное появление текста
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

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

Встроенные анимации Quasar

Quasar предоставляет ряд готовых классов для анимаций, которые можно использовать без написания CSS:

  • fade – плавное исчезновение и появление.
  • slide – сдвиг элементов с разных сторон (top, bottom, left, right).
  • scale – масштабирование элементов.
  • rotate – вращение элементов.
  • flip – переворот по оси X или Y.

Использование встроенных классов упрощает создание анимаций:

<q-btn label="Появить панель" @click="show = !show" />
<q-card v-show="show" class="q-pa-md slide-up-enter-active slide-up-leave-active">
  Панель с анимацией slide-up
</q-card>

В этом примере slide-up-enter-active и slide-up-leave-active — встроенные классы Quasar, обеспечивающие плавный подъем и исчезновение карточки.

Анимации с QTransition

Quasar включает компонент <q-transition> для более тонкой настройки анимаций. Он позволяет управлять типом анимации через проп name и предоставляет удобные события:

  • @before-enter – до начала анимации.
  • @enter – при запуске анимации.
  • @after-enter – после завершения анимации.
  • @before-leave – перед уходом элемента.
  • @leave – во время ухода.
  • @after-leave – после ухода.

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

<q-transition name="fade" @before-enter="onBeforeEnter" @after-leave="onAfterLeave">
  <q-banner v-if="bannerVisible" class="bg-secondary text-white">
    Важное уведомление
  </q-banner>
</q-transition>

<script setup>
import { ref } from 'vue'

const bannerVisible = ref(true)

function onBeforeEnter(el) {
  console.log('Анимация начинается', el)
}

function onAfterLeave(el) {
  console.log('Анимация завершена', el)
}
</script>

<q-transition> позволяет комбинировать стандартные CSS-анимации и JavaScript-хуки для более сложных эффектов.

Групповые анимации с <transition-group>

Для списков и коллекций элементов Quasar предоставляет <transition-group>. Он позволяет анимировать добавление, удаление и перемещение элементов.

<q-btn label="Добавить элемент" @click="addItem" />
<transition-group name="list" tag="div">
  <q-item v-for="item in items" :key="item.id" class="q-mb-sm">
    {{ item.name }}
  </q-item>
</transition-group>

<script setup>
import { ref } from 'vue'

const items = ref([{ id: 1, name: 'Элемент 1' }])

function addItem() {
  items.value.push({ id: Date.now(), name: `Элемент ${items.value.length + 1}` })
}
</script>

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

Эта техника позволяет создавать динамические списки с плавными появлением и исчезновением элементов.

Анимации и Quasar Utilities

Quasar предоставляет CSS-утилиты для анимаций и transitions:

  • transition-* – классы для быстрого добавления эффекта (например, transition-fade, transition-slide-up).
  • animated – базовый класс для включения анимации.
  • Сочетание с color и spacing утилитами позволяет создавать визуально согласованные эффекты без написания отдельного CSS.

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

<q-card class="transition-slide-left animated q-mb-md">
  Карточка с эффектом сдвига влево
</q-card>

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

  • Комбинирование эффектов: можно одновременно использовать несколько эффектов, например, fade + scale, для создания более выразительных анимаций.
  • События жизненного цикла анимаций: использование хуков before-enter и after-leave помогает управлять состоянием компонентов и предотвращать конфликты анимаций.
  • Производительность: сложные анимации с большим количеством элементов могут снижать производительность. Рекомендуется использовать v-show вместо v-if при частом переключении видимости.
  • Адаптивность: Quasar анимации хорошо сочетаются с responsive-дизайном, позволяя изменять параметры переходов в зависимости от размеров экрана.

Заключение

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

Оглавление