动画

htmx 的设计允许您使用 CSS 过渡为您的网页添加流畅的动画和过渡，只需使用 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 将构建交换过程，使 CSS 过渡（在 .smooth 类上定义）应用于从 red 到 blue 的样式更新，并平滑地在这两者之间过渡。

#演示

颜色交换演示

#平滑进度条

该进度条演示也使用此基本 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>

#演示

#稳定过渡

#添加时淡入

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

#演示

#请求进行中动画

您还可以利用 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>

#演示

#使用 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>

#演示

切换演示

#使用视图过渡 API

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

以下是一个使用视图过渡的交换示例。过渡通过 CSS 中的 view-transition-name 属性绑定到外部 div，并且该过渡在 ::view-transition-old 和 ::view-transition-new 中定义，使用 @keyframes 定义动画。（有关视图过渡 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>

#演示

初始内容

#结论

您可以使用上述技术，使用 htmx 创建一些有趣且令人愉悦的普通 HTML 效果。

动画