HTMX - 动画

---

---

动画使您的网站对用户更具吸引力，并帮助您更好地展示您的产品或服务。HTMX 允许开发者使用CSS 过渡动画。 CSS 过渡动画用于处理 CSS 中的动画速度。这允许您在指定持续时间内为元素的样式属性设置动画。

您可以使用视图转换 API 创建动画。视图转换 API 能够在网站视图之间创建动画转换。对于单页应用，它包括 DOM 状态之间的动画；对于多页应用，它包括文档之间导航的动画。

HTMX 动画列表

基本的 CSS 动画

简单的动画，例如颜色变化或进度条，可以被认为是基本的 CSS 动画，在这里我们将看到一个元素颜色变化的动画示例。

CSS 代码

.animation {
 transition: all 1s ease-in;
}

HTML 代码

<div id="color-change" class="animation" style="color:red" 
 hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
 TutorialsPoint
</div>
<div id="color-change" class="animation" style="color:blue" 
 hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
 TutorialsPoint
</div>

切换转换

切换转换动画淡入淡出任何元素。让我们创建一个淡出切换动画。因此，在这个动画中，如果您想淡出一个在请求结束时将被移除的元素，那么您必须将htmx-swapping 类与 CSS 一起使用并扩展切换阶段。

CSS 代码

.fade-out.htmx-swapping {
 opacity: 0;
 transition: opacity 1s ease-out;
}

HTML 代码

<button class="fade-out"
 hx-delete="/fade_out_demo"
 hx-swap="outerHTML swap:1s">
 TutorialsPoint
</button>

平滑转换

它允许在内容更新时进行平滑的视觉转换。让我们创建一个简单的演示来展示此功能。

CSS 代码

#fade-in.htmx-added {
 opacity: 0;
}
#fade-in {
 opacity: 1;
 transition: opacity 1s ease-out;
}

HTML 代码

<button id="fade-in"
 class="btn primary"
 hx-post="/fade_in_demo"
 hx-swap="outerHTML settle:1s">
 TutorialsPoint
</button>

请求进行中动画

如果您在触发请求的元素上应用htmx-request，则可以实现请求进行中动画。下面是我们将应用此类的表单元素，因此当您提交时，它将更改并显示您已提交。

CSS 代码

form.htmx-request {
 opacity: .5;
 transition: opacity 300ms linear;
}

<form hx-post="/name" hx-swap="outerHTML">
<label>Name:</label><input name="name"><br/>
<button class="btn primary">Submit</button>
</form>