css - HTMX - 目标元素上的过渡

Question

我最近一直在试验 HTMX，但我似乎无法找到一种方法来将过渡应用到目标元素。我有一个提交 GET 请求并返回表的表单。

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

它基本上返回一个包含如下表格的 div:

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

</div>

div 的 CSS 如下:

.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;
    }
}

现在 css 转换在我第一次加载页面时有效，但是当我执行 AJAX 请求时没有任何反应。

我尝试将 style="opacity:0"应用于表单，但显然它仅适用于表单而不适用于目标...

知道如何将过渡应用到目标元素吗？

Answer 1

你那里的东西对我有用。您是要替换整个表格还是要添加到表格中？

这适用于我使用您的 CSS 和 hx-swap="outerHTML" 来替换表格。

<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>