动画

htmx 旨在让您使用 CSS transitions 通过仅使用 CSS 和 HTML 为您的网页添加平滑的动画和过渡。下面是几种 动画技术的示例。

htmx 还允许您使用新的 View Transitions API 来创建动画。

Basic CSS Animations

颜色脉动

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 的样式更新，并在 它们之间平滑过渡。

Demo

平滑进度条

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

交换过渡

交换时淡出

如果您想在请求结束时淡出即将被移除的元素，您可以利用 htmx-swapping 类结合一些 CSS，并将交换阶段延长到足够长的时间以 完成动画。这可以通过以下方式实现：

<style>
.fade-me-out.htmx-swapping {
  opacity: 0;
  transition: opacity 1s ease-out;
}
</style>
<button class="fade-me-out"
        hx-delete="/fade_out_demo"
        hx-swap="outerHTML swap:1s">
        Fade Me Out
</button>

Demo

Delete Me

Settling 过渡

添加时淡入

基于上一个示例，我们可以使用 settle 阶段的 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>

Demo

Fade Me In

请求进行中动画

您还可以利用 htmx-request 类，该类应用于触发请求的元素。下面 是一个表单，在提交时会更改其外观以指示请求正在处理：

<style>
  form.htmx-request {
    opacity: .5;
    transition: opacity 300ms linear;
  }
</style>
<form hx-post="/name" hx-swap="outerHTML">
<label>Name:</label><input name="name"><br/>
<button class="btn primary">Submit</button>
</form>

Demo

使用 htmx class-tools 扩展

通过使用 class-tools 扩展， 可以创建许多有趣的动画。

这是一个切换 div 不透明度的示例。请注意，我们将切换时间设置得比 过渡时间稍长。这可以避免过渡被类更改中断而导致的闪烁。

<style>
.demo.faded {
  opacity:.3;
}
.demo {
  opacity:1;
  transition: opacity ease-in 900ms;
}
</style>
<div class="demo" classes="toggle faded:1s">Toggle Demo</div>

Demo

使用 View Transition API

htmx 通过 hx-swap 属性的 transition 选项提供对新的 View Transitions API 的访问。

下面是一个使用视图过渡的交换示例。该过渡通过 CSS 中的 view-transition-name 属性与外部 div 绑定，该过渡使用 @keyframes 定义动画，基于 ::view-transition-old 和 ::view-transition-new。（View Transition API 的更多细节可以在 Chrome 开发者页面 上找到。）

此过渡的旧内容应向左滑出，新内容应从右侧滑入。

请注意，截至本文撰写时，视觉过渡仅在 Chrome 111+ 上发生，但预计更多浏览器将在 不久的将来实现此功能。

<style>
   @keyframes fade-in {
     from { opacity: 0; }
   }

   @keyframes fade-out {
     to { opacity: 0; }
   }

   @keyframes slide-from-right {
     from { transform: translateX(90px); }
   }

   @keyframes slide-to-left {
     to { transform: translateX(-90px); }
   }

   .slide-it {
     view-transition-name: slide-it;
   }

   ::view-transition-old(slide-it) {
     animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
   }
   ::view-transition-new(slide-it) {
     animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }
</style>


<div class="slide-it">
   <h1>Initial Content</h1>
   <button class="btn primary" hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
     Swap It!
   </button>
</div>

Demo

结论

您可以使用上述技术，在使用 htmx 的同时，通过普通的 HTML 创建许多有趣且令人愉悦的效果。