HTMX - Transition on target element

Issue

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?

Solution

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>

Answered By - Alejandro