Динамика AlpineJS - Готовые решения на AlpineJS - Модальное окно

Исходный код - доступен по ссылке

Адаптивное модальное окно — это всплывающее окно, которое появляется на экране, созданное с использованием Tailwind CSS для дизайна и Alpine.js для его работы. Tailwind CSS использует простые классы, чтобы модальное окно выглядело хорошо на экране любого размера. Alpine.js позволяет открывать и закрывать модальное окно при необходимости, например, когда кто-то нажимает кнопку, чтобы отобразить модальное окно, или нажимает клавишу Escape, чтобы закрыть его. Это делает модальное окно простым в использовании. Это также легко сделать, потому что нет необходимости писать много кода.

Пояснения:

x-data="{ open: false }"

Это директива Alpine.js, которая инициализирует новый компонент некоторыми данными. Здесь создается объект данных с одним открытым свойством, которое представляет собой логическое значение, имеющее значение false. Это свойство контролирует, является ли модальное окно открытым или закрытым. Если open имеет значение true, будет отображаться модальное окно; если open имеет значение false, модальное окно будет скрыто.

@click.away="open = false": 

Эта директива сообщает Alpine.js прослушивать события кликов, которые происходят за пределами текущего элемента (в данном случае модального). Если щелчок происходит вне модального окна, выполняется выражение open = false, которое устанавливает для свойства open значение false и модальное окно закрывается. Это удобный способ закрыть модальные окна или раскрывающиеся списки, когда пользователь уходит от них.

@keydown.escape.window="open = false": 

Эта директива прослушивает событие нажатия клавиши Escape (ESC). Модификатор .window сообщает Alpine.js прослушивать это событие в объекте окна, что означает, что оно будет работать независимо от того, где находится фокус на странице. Когда пользователь нажимает клавишу Escape, для свойства open устанавливается значение false, что скрывает модальное окно.

Transition

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

Свойство в общем виде записывается так:

transition: property duration timing-function delay;

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all, переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах (s) или миллисекундах (ms).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear, ease, ease-in, ease-out, ease-in-out.
• delay — время задержки перед началом перехода. Задаётся в секундах (s) или миллисекундах (ms).

Далее по коду:

x-transition:enter="ease-out duration-100"

Это определяет переход, который будет использоваться при входе модального окна (становится видимым). Ослабление означает, что переход начинается быстро, а затем замедляется к концу. Длительность-100 устанавливает продолжительность перехода на 100 миллисекунд.

x-transition:enter-start="opacity-0"

Это определяет начальное состояние входящего перехода. opacity-0 означает, что модальное окно становится полностью прозрачным (невидимым).

x-transition:enter-end="opacity-100 scale-100"

Это определяет конечное состояние входящего перехода. opacity-100 означает, что модальная отделка полностью непрозрачна (видима). Scale-100 указывает, что модальное окно должно быть в полном размере; при переходах вы можете анимировать масштаб, чтобы элемент увеличивался или уменьшался — масштаб 100 означает, что масштабирование не применяется, поэтому он остается в своем естественном размере.

x-transition:leave="ease-in duration-200"

Это определяет переход, который будет использоваться, когда модальное окно уходит (становится невидимым). Легкость означает, что переход начинается медленно, а затем ускоряется. Длительность-200 устанавливает продолжительность перехода на 200 миллисекунд, что немного больше, чем у перехода входа, что дает другое ощущение при его закрытии.

x-transition:leave-start="opacity-100 scale-100"

Это определяет начальное состояние уходящего перехода. Модальное окно становится полностью видимым и в полном размере.

x-transition:leave-end="opacity-0"

Это определяет конечное состояние уходящего перехода. Модальное окно становится полностью прозрачным и фактически исчезает из поля зрения.