I'm trying to use a CSS transition in a similar manner to https://htmx.org/examples/bulk-update/ to show which row was updated, but I can't get it to work for my example using HTMX 1.3.3
The relevant HTML is:
<div id="replace-me">
<div id="A" hx-get="/A" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">A</div>
<div id="B" hx-get="/B" hx-target="#replace-me" hx-select="#replace-me" hx-swap="outerHTML">B</div>
</div>
When either div A or div B is clicked, the server returns the above HTML again, but with class="updated" applied to the div in question.
I also have the following CSS:
.htmx-settling .updated {
background: darkseagreen;
}
.updated {
border: 1px solid black;
}
I would expect to see the clicked div show a border and also flash green. However what I observe is:
- I click on div A.
- div A shows a border but does not flash.
- I click on div B.
- div B shows a border, but div A flashes.
- From then on, the div that I click on shows a border, but the div that was clicked on the previous turn flashed.
I'm guessing this is something to do with the timing of the application/removal of the htmx-settling class combined with when the swapped content gains the new class. I've read https://htmx.org/docs/#request-operations and https://htmx.org/docs/#css_transitions, but can't see where I'm going wrong.