.. _htmx_css_transitions_intro:
==================================================================================
HTMX CSS transitions Introduction
==================================================================================
- https://htmx.org/docs/#css_transitions
htmx makes it easy to use **CSS Transitions without javascript**.
To understand how CSS transitions work in htmx, you must first understand
the swap & settle model that htmx uses.
When new content is received from a server, before the content is swapped in,
the existing content of the page is examined for elements that match by
the id attribute.
If a match is found for an element in the new content, the attributes of
the old content are copied onto the new element **before the swap occurs**.
The new content is then swapped in, but with the old attribute values.
Finally, the new attribute values are swapped in, after a "settle" delay
(100ms by default).
This may seem a bit complicated, but with this mechanic for swapping
content, you can write CSS transitions from old to new attribute values.
An example will help clarify. Consider this original content:
.. code-block:: html
Original Content
And this content, which has been received by htmx after an AJAX request,
to replace it:
.. code-block:: html
New Content
The first thing that htmx does, before it swaps in this new content, is
note that these two elements match by id (and tag type).
It therefore swaps the old attribute values onto the new content:
.. code-block:: html
New Content
Note that the new content no longer has a class attribute. This modified
new content is then swapped into the DOM. This is the swap step.
Next, after a "settle" delay, the new div will have its attributes
updated to the actual values received from the server:
.. code-block:: html
New Content
.. code-block:: css
.red {
color: red;
transition: all ease-in 1s ;
}
And the newly swapped content will gently transition to a red text color over one second.
All of that may seem a little crazy, but it can be summarized as this:
In htmx, all you need to do to use CSS transitions for an element is keep its id stable across requests
Because this div was in the DOM with the original div's attributes, this
is will trigger a CSS transition. So you can write, for example, this CSS:
.. code-block:: css
.red {
color: red;
transition: all ease-in 1s ;
}
And the newly swapped content will gently transition to a red text color
over one second.
All of that may seem a little crazy, but it can be summarized as this::
In htmx, all you need to do to use CSS transitions for an element
is keep its id stable across requests