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>