Перейти к содержимому
Логотип AlpineJS Логотип AlpineJS Alpine.js по-русски  

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-классы.

<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Добавляется через один кадр после вставки элемента (одновременно с удалением enter-start), удаляется по завершении перехода/анимации.
:leaveПрименяется на протяжении всей фазы выхода.
:leave-startДобавляется сразу при срабатывании перехода выхода, удаляется через один кадр.
:leave-endДобавляется один кадр после срабатывания перехода выхода (одновременно с удалением leave-start), удаляется по завершении перехода/анимации.

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

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

  2. Какой из вариантов отвечает за переход выхода?