CSS переходы

htmx упрощает использование CSS переходов без JavaScript. Рассмотрим следующий HTML-контент:

<div id="div1">Исходный контент</div>

Представьте, что этот контент заменяется htmx через AJAX-запрос следующим новым контентом:

<div id="div1" class="red">Новый контент</div>

Обратите внимание на два момента:

• У div одинаковый идентификатор в исходном и новом контенте
• К новому контенту был добавлен класс red

Исходя из этой ситуации, мы можем написать CSS переход от старого состояния к новому:

.red {
    color: red;
    transition: all ease-in 1s ;
}

Когда htmx заменяет этот контент, это происходит таким образом, что CSS переход будет применяться к новому контенту, обеспечивая плавный переход к новому состоянию.

Итак, в итоге, всё, что вам нужно сделать для использования CSS переходов для элемента — это сохранять его id стабильным между запросами!

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

Детали

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

Когда новый контент получен от сервера, перед его заменой содержимое страницы проверяется на элементы, которые соответствуют атрибуту id. Если для элемента из нового контента найдено совпадение, атрибуты старого контента копируются на новый элемент перед заменой. Затем новый контент заменяется, но со старыми значениями атрибутов. Наконец, новые значения атрибутов заменяются после задержки «стабилизации» (по умолчанию 20 мс). Это немного необычно, но именно это позволяет CSS переходам работать без использования JavaScript со стороны разработчика.