HTMX - 动画

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

您可以使用 View Transitions API 创建动画。View Transitions API 能够在网站视图之间创建动画过渡。对于单个页面，它包括 DOM 状态之间的动画，对于多页应用程序，它包括文档之间的动画导航。

HTMX 中的动画列表

基本 CSS 动画

简单的动画(如颜色变化或进度条)可视为基本 CSS动画，这里我们将看到动画中元素颜色变化的一个例子。

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

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

交换过渡

交换过渡动画可淡入淡出任何元素。让我们创建一个淡出交换动画。因此，在此动画中，如果您想淡出将在请求结束时被删除的元素，则必须使用带有 CSS 的 htmx-swapping 类并扩展交换阶段。

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

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

Settling Transitions

它允许在内容更新时实现平滑的视觉过渡。让我们创建一个简单的演示来展示此功能。

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

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

请求飞行动画

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

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>