动画

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

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

基本 CSS 动画

色彩变换

htmx 中最简单的动画技术是在内容交换过程中保持元素 id 不变。如果元素的保持 id 不变，htmx 将以某种方式交换它，以便在元素的旧版本和新版本之间实现 CSS 过渡。

参考这个 div：

<style>
.smooth {
  transition: all 1s ease-in;
}
</style>
<div id="color-demo" class="smooth" style="color:red"
      hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
  Color Swap Demo
</div>

这个 div 将每秒轮询一次，并且会被新内容替换，从而将样式更改 color 为新的值（例如blue）：

<div id="color-demo" class="smooth" style="color:blue"
      hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
  Color Swap Demo
</div>

因为 div 具有固定的 id color-demo ，所以 htmx 将构造交换，以便在 .smooth 类上定义 CSS 转换。适用于从 red 到 blue 的样式更新，并在它们之间平滑过渡。

平滑的进度条

进度条示例也使用了这种基本的 CSS 动画技术，通过更新进度条元素的 length 属性，实现流畅的动画。

演示

Color Swap Demo