blob: 27aa304148f2fae278539960e662a9320ba03eb3 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
+++
title = "class-tools"
+++
The `class-tools` extension allows you to specify CSS classes that will be swapped onto or off of the elements by using
a `classes` or `data-classes` attribute. This functionality allows you to apply
[CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
to your HTML without resorting to javascript.
A `classes` attribute value consists of "runs", which are separated by an `&` character. All
class operations within a given run will be applied sequentially, with the delay specified.
Within a run, a `,` character separates distinct class operations.
A class operation is an operation name `add`, `remove`, or `toggle`, followed by a CSS class name,
optionally followed by a colon `:` and a time delay.
## Install
```html
<script src="https://unpkg.com/htmx.org@1.9.11/dist/ext/class-tools.js"></script>
```
## Usage
```html
<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>
```
|
