Расширение class-tools

Расширение class-tools позволяет задавать CSS-классы, которые будут добавляться или удаляться с элементов с помощью атрибута classes или data-classes. Эта функциональность позволяет применять CSS-переходы к вашему HTML без использования JavaScript.

Значение атрибута classes состоит из «последовательностей», разделённых символом &. Все операции с классами в данной последовательности применяются последовательно с указанной задержкой.

Внутри последовательности символ , разделяет отдельные операции с классами.

Операция с классом — это имя операции add, remove, или toggle, за которым следует имя CSS-класса, необязательно с двоеточием : и задержкой во времени.

Установка

<script src="https://unpkg.com/htmx.org/dist/ext/class-tools.js"></script>

Использование

<div hx-ext="class-tools">
    <div classes="add foo"/> <!-- adds the class "foo" after 100ms -->
    <div class="bar" classes="remove bar:1s"/> <!-- removes the class "bar" after 1s -->
    <div class="bar" classes="remove bar:1s, add foo:1s"/> <!-- removes the class "bar" after 1s
                                                                then adds the class "foo" 1s after that -->
    <div class="bar" classes="remove bar:1s & add foo:1s"/> <!-- removes the class "bar" and adds
                                                                 class "foo" after 1s  -->
    <div classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s -->
</div>