x-transition

Alpine уже из коробки предоставляет надёжную утилиту для анимации переходов. С помощью нескольких директив x-transition можно создавать плавные переходы между появлением и исчезновением элемента.

Существует два основных способа организации переходов в Alpine:

Хелпер x-transition

Применение классов CSS

Хелпер x-transition

Самый простой способ реализовать анимацию перехода с помощью Alpine — это добавить x-transition к элементу с x-show на нём. Например:

<div x-data="{ open: false }">
  <button @click="open = !open">Переключить</button>
  <div x-show="open" x-transition> Привет👋 </div>
</div>

Переключить

Привет👋

Как видно, по умолчанию x-transition применяет приятные переходы для затухания и масштабирования раскрывающегося элемента.

Вы можете переопределить эти значения по умолчанию с помощью модификаторов, присоединённых к x-transition. Давайте рассмотрим их.

Настройка продолжительности

Изначально длительность перехода устанавливается равной 150 миллисекундам при появлении и 75 миллисекундам при исчезновении.

С помощью модификатора .duration можно переопределить значения по умолчанию:

<div ... x-transition.duration.500ms></div>

Приведённый выше <div> будет переходить на 500 миллисекунд при появлении и на 500 миллисекунд при исчезновении.

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

<div ... x-transition:enter.duration.500ms x-transition:leave.duration.400ms></div>

Настройка задержки

Задержать переход можно с помощью модификатора .delay, например, так:

<div ... x-transition.delay.50ms></div>

Приведённый пример задержит переход между появлением и исчезновением элемента на 50 миллисекунд.

Настройка непрозрачности

По умолчанию в x-transition применяется переход по масштабу и непрозрачности для достижения эффекта «затухания».

Если требуется применить только переход непрозрачности (без масштабирования), то это можно сделать так:

<div ... x-transition.opacity></div>

Настройка масштаба

Аналогично модификатору .opacity, можно настроить x-transition только на масштабирование (а не на непрозрачность перехода):

<div ... x-transition.scale></div>

Модификатор .scale также предоставляет возможность настройки значений масштаба и начала координат:

<div ... x-transition.scale.80></div>

Приведённый выше фрагмент будет масштабировать элемент вверх и вниз на 80%.

Опять же, вы можете настроить эти значения отдельно для появления и исчезновения элемента:

<div ... x-transition:enter.scale.80 x-transition:leave.scale.90></div>

Для настройки начала перехода масштаба можно использовать модификатор .origin:

<div ... x-transition.scale.origin.top></div>

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

Как вы уже догадались, возможными значениями для этой настройки являются: top, bottom, left и right.

При желании можно объединить два исходных значения. Например, если нужно, чтобы масштабирование применялось в правом верхнем углу, можно использовать: .origin.top.right в качестве модификатора.

Применение классов CSS

Для непосредственного контроля над тем, что именно попадает в переходы, можно применять специальные CSS-классы.

Заметка

В следующих примерах используются служебные классы TailwindCSS.

<div x-data="{ open: false }">
  <button @click="open = !open">Переключить</button>
  <div
    x-show="open"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0 scale-90"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-90"
  >
    Привет👋
  </div>
</div>

Переключить

Привет👋

Директива	Описание
:enter	Применяется ко всему процессу появления элемента.
:enter-start	Срабатывает перед вставкой элемента, отключается через кадр.
:enter-end	Включается через кадр после появления элемента, исчезает после анимации.
:leave	Применяется ко всему процессу удаления элемента.
:leave-start	Срабатывает сразу при начале удаления, отключается через кадр.
:leave-end	Включается через кадр после начала удаления, убирается после анимации.

Проверка знаний

1. Как указать продолжительность анимации перехода?

   1. x-transition.time.10s

   2. x-transition.duration.50ms

   3. x-transition.origin.fast

   Отправить

2. Какой из вариантов отвечает за анимацию исчезновения элемента?

   1. x-transition:leave

   2. x-transition:exit

   3. x-transition:enter

   Отправить