Замена (свопинг)

htmx предлагает несколько различных способов замены HTML, возвращаемого в DOM. По умолчанию содержимое заменяет innerHTML целевого элемента. Вы можете изменить это, используя атрибут hx-swap с любым из следующих значений:

Название	Описание
innerHTML	значение по умолчанию, помещает содержимое внутрь целевого элемента
outerHTML	заменяет весь целевой элемент возвращаемым содержимым
afterbegin	добавляет содержимое перед первым дочерним элементом внутри целевого
beforebegin	добавляет содержимое перед целевым элементом в родительском элементе
beforeend	добавляет содержимое после последнего дочернего элемента внутри целевого
afterend	добавляет содержимое после целевого элемента в родительском элементе
delete	удаляет целевой элемент независимо от ответа
none	не добавляет содержимое из ответа (обработаются внеплановые замены и заголовки ответа)

Замены с преобразованием

В дополнение к стандартным механизмам замены, htmx также поддерживает замены с преобразованием через расширения. Подобные замены пытаются объединить новый контент с существующим DOM, а не просто заменять его. Они часто лучше сохраняют такие вещи, как фокус, состояние видео и т. д., изменяя существующие узлы на месте во время операции замены, что требует больше ресурсов ЦП.

Следующие расширения доступны для замен с преобразованием:

• Idiomorph — Алгоритм преобразования, созданный разработчиками htmx.
• Morphdom Swap — Основан на morphdom, оригинальной библиотеке преобразования DOM.
• Alpine-morph — Основан на плагине Alpine Morph, хорошо работает с Alpine.js.

Переходы представлений

Новый экспериментальный View Transitions API предоставляет разработчикам способ создания анимированного перехода между различными состояниями DOM. Он всё ещё находится в активной разработке и не доступен во всех браузерах, но htmx предлагает способ работы с этим новым API, который возвращается к механизму без переходов, если API недоступен в конкретном браузере.

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

• Установите переменную конфигурации htmx.config.globalViewTransitions в true, чтобы использовать переходы для всех замен.
• Используйте опцию transition:true в атрибуте hx-swap.
• Если замена элемента будет переходить из-за одной из вышеуказанных конфигураций, вы можете поймать событие htmx:beforeTransition и вызвать preventDefault(), чтобы отменить переход.

Переходы представлений можно настраивать с помощью CSS, как описано в документации Chrome.

Вы можете увидеть пример перехода представлений на странице Примеры анимаций.

Опции замены

Атрибут hx-swap поддерживает множество опций для настройки поведения замены в htmx. Например, по умолчанию htmx будет заменять заголовок тега title, найденного где угодно в новом контенте. Вы можете отключить это поведение, установив модификатор ignoreTitle в true:

<button hx-post="/like" hx-swap="outerHTML ignoreTitle:true">Нравится</button>

Доступные модификаторы для hx-swap:

Модификатор	Описание
transition	true или false, указывает, использовать ли View Transitions API для этой замены
swap	Задержка замены (например, 100ms) между очисткой старого контента и вставкой нового контента
settle	Задержка стабилизации (например, 100ms) между вставкой нового контента и его стабилизацией
ignoreTitle	Если установлено в true, любой заголовок, найденный в новом контенте, будет проигнорирован и не обновит заголовок документа
scroll	top или bottom, прокрутит целевой элемент к его верхней или нижней части
show	top или bottom, прокрутит верхнюю или нижнюю часть целевого элемента в область видимости

Все модификаторы замены указываются после указания стиля замены и разделяются двоеточием.

Смотрите документацию hx-swap для получения более подробной информации об этих опциях.