CSS Transitions
Adding CSS transitions can give some polish to a web app. For example, when a todo is deleted in a todo app, its row in the list can instantaneously disappear. But it’s more visually pleasing if the row gradually fades out before disappearing completely.
When htmx swaps HTML into the DOM it goes through a series of steps that usually don’t need to be considered. But knowing about them is key to understanding how CSS transitions can be added and how their timing can be tuned.
These are the steps:
-
Add the htmx-swapping CSS class to the target element.
-
Delay for a short time (htmx.config.defaultSwapDelay defaults to 0).
-
Remove the htmx-swapping CSS class from the target element.
-
Add the htmx-settling CSS class to the target element. ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access