HTMX

Question

我最近一直在试验 HTMX，但我似乎找不到将过渡应用到目标元素的方法。我有一个提交 GET 请求和 returns 一个 table.

的表单

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

它基本上 returns 一个 div 包含 table 这样的：

<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

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

我用你的 CSS 和 hx-swap="outerHTML" 来代替 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>

HTMX - 目标元素上的过渡

HTMX - Transition on target element

css