x-show и x-transition

Директива x-show показывает элемент, когда выражение истинно, и прячет, когда ложно. Элемент остаётся в разметке, Alpine лишь переключает ему display: none. Директива x-transition добавляет к этому плавное появление и исчезновение.

x-show

Подсказка в списке дел, которую можно скрыть:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ open: true }">
  <button @click="open = !open">Подсказка</button>
  <p x-show="open">Нажмите Enter, чтобы добавить задачу.</p>
</div>

Кнопка прячет и снова показывает абзац. Выражение open = !open меняет значение на противоположное.

Условие из данных

В x-show подходит любое выражение, например проверка длины массива:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ tasks: [] }">
  <button @click="tasks.push('Задача')">Добавить</button>
  <button @click="tasks = []">Очистить</button>
  <p x-show="tasks.length === 0">Список пуст.</p>
  <p x-show="tasks.length > 0" x-text="'Задач: ' + tasks.length"></p>
</div>

Пока задач нет, видна надпись «Список пуст.». После первого добавления её сменяет счётчик.

x-transition

Достаточно добавить x-transition без значения — элемент будет появляться с затуханием и лёгким увеличением:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
 
<div x-data="{ open: false }">
  <button @click="open = !open">Подробнее</button>
  <p x-show="open" x-transition>Задача создана Анной 3 мая.</p>
</div>

Абзац появляется и исчезает плавно, примерно за 150 мс.

Настройка перехода

Модификаторы меняют анимацию:

Для полного контроля переходы задают классами CSS на каждый этап — так удобно работать с Tailwind:

<div
  x-show="open"
  x-transition:enter="transition ease-out duration-300"
  x-transition:enter-start="opacity-0"
  x-transition:enter-end="opacity-100"
  x-transition:leave="transition ease-in duration-200"
  x-transition:leave-start="opacity-100"
  x-transition:leave-end="opacity-0"
>
  ...
</div>

Этапы enter и leave описывают появление и исчезновение, -start и -end — состояние в начале и конце.

Частая ошибка

Ставить x-show на элемент, которому CSS задаёт display с пометкой !important. Alpine прячет элемент встроенным стилем display: none, а правило с !important его перебивает — элемент не скрывается. Уберите !important из CSS или добавьте директиве модификатор: x-show.important="open".