动画

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

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

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

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

演示