动画

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

• 基本 CSS 动画：色彩变换、进度条
• 交换过渡：交换时淡出
• 内容过渡：淡入淡出
• 请求进行中
• 使用 class-tools 扩展
• 视图转换 API

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

交换过渡

交换时淡出

如果你想要在请求结束时淡出被删除的元素，你需要利用 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>

演示

Delete Me