动画

htmx 旨在让你使用仅使用 CSS 和 HTML 即可为你的网页添加流畅的动画和过渡。以下是各种动画技术的几个示例。

htmx 还允许你使用新的 视图转换 API 来创建动画。

内容过渡

淡入淡出

基于上一个示例，我们可以在确定阶段使用 htmx-added 类来淡入新内容。你还可以使用 htmx-settling 类针对目标（而不是新内容）实现 CSS 过渡。

<style>
#fade-me-in.htmx-added {
  opacity: 0;
}
#fade-me-in {
  opacity: 1;
  transition: opacity 1s ease-out;
}
</style>
<button id="fade-me-in"
        class="btn primary"
        hx-post="/fade_in_demo"
        hx-swap="outerHTML settle:1s">
        Fade Me In
</button>

演示