HTMX - Transition on target element

Question

I've been experimenting with HTMX recently and I cant seem to find a way to apply a transition to a target element. I have a form that submits a GET request and returns a table.

<form class="mt-3" hx-get="/data/statement/AJAX" hx-target="#statementAJAX" >

It basically returns a div containing the table like this:

<div id="statementAJAX" class="fade-in">

</div>

the CSS for the div is the following:

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}


@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Now the css transition works when i first load the page but when I execute the AJAX request nothing happens.

I tried apllying style="opacity:0" to the form but obviously it applies only to the form and not the target...

Any idea how to apply the transition to the target element?

Answer 1

What you have there works for me. Are you trying to replace the entire table or add to the table?

This works for me using your CSS and hx-swap="outerHTML" to replace the table.

<a href="#" id="test" hx-get="/load.html" hx-target="#table" hx-trigger="click" hx-swap="outerHTML">
      Submit
</a>

<div id="table" class="fade-in"></div> 

load.html

<div id="table" class="fade-in">
    table content
</div>