1

我最近一直在尝试使用 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" 应用于表单，但显然它仅适用于表单而不适用于目标......

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

4

1 回答 1

2

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

这适用于我使用您的 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>
于 2022-01-03T16:38:22.077 回答