CSS 过渡

htmx 可以轻松使用CSS Transitions，无需 JavaScript。参考以下 HTML 内容：

<div id="div1">Original Content</div>

想象一下，这个内容被 ajax 或 htmx 替换成新的内容：

<div id="div1" class="red">New Content</div>

请注意两件事：

• div在原始内容和新内容中具有相同的id
• 该 red 类已添加到新内容

鉴于这种情况，我们可以编写一个从旧状态到新状态的 CSS 过渡：

.red {
    color: red;
    transition: all ease-in 1s ;
}

当 htmx 交换此新内容时，它将以 CSS 过渡应用于新内容的方式进行交换，从而为您提供一个漂亮、平稳的过渡到新状态。

所以，总而言之，要对元素使用 CSS 过渡，你需要做的就是保持其 id 在请求中的稳定！

你可以查看 动画示例 以了解更多详细信息和实例演示。

详情

要了解 CSS 转换在 htmx 中实际上是如何工作的，你必须了解 htmx 使用的底层交换和模型。

当从服务器收到新内容时，在换入内容之前，将检查页面的现有内容中是否存在与 id 属性匹配的元素。如果在新内容中找到元素的匹配项，则会在交换发生之前将旧内容的属性复制到新元素上。然后换入新内容，但使用旧的属性值。最后，在 “settle” 延迟 （默认为 20ms） 之后换入新的属性值。有点疯狂，但这就是允许 CSS 过渡在开发人员没有任何 javascript 的情况下工作的原因。