動畫

htmx 的設計宗旨是讓您僅使用 CSS 和 HTML，就能夠使用 CSS 過渡，為您的網頁添加流暢的動畫和過渡效果。以下是一些各種動畫技巧的範例。

htmx 也允許您使用新的視圖過渡 API 來建立動畫。

#基本 CSS 動畫

#色彩跳動

htmx 中最簡單的動畫技巧是讓元素在內容交換時保持 id 的穩定。如果元素的 id 保持穩定，htmx 會以 CSS 過渡效果可以在元素的新舊版本之間執行的這種方式來交換它。

考慮這個 div

<style>
.smooth {
  transition: all 1s ease-in;
}
</style>
<div id="color-demo" class="smooth" style="color:red"
      hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
  Color Swap Demo
</div>

這個 div 會每秒輪詢一次，並會被新內容取代，新內容會將 color 樣式變更為新值 (例如 blue)

<div id="color-demo" class="smooth" style="color:blue"
      hx-get="/colors" hx-swap="outerHTML" hx-trigger="every 1s">
  Color Swap Demo
</div>

由於 div 具有穩定的 id，color-demo，htmx 將會組織交換，使得定義在 .smooth 類別上的 CSS 過渡效果，適用於從 red 到 blue 的樣式更新，並在它們之間平滑過渡。

#範例

色彩交換範例

#平滑進度條

進度條範例也使用了這種基本 CSS 動畫技巧，透過更新進度條元素的 length 屬性，實現平滑動畫。

#交換過渡

#交換時淡出

如果您想在請求結束時淡出即將移除的元素，您需要利用 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>

#範例

#穩定過渡

#添加時淡入

基於上一個範例，我們可以透過在穩定階段使用 htmx-added 類別來淡入新內容。您也可以透過使用 htmx-settling 類別，對目標而非新內容寫入 CSS 過渡。

<style>
#fade-me-in.htmx-added {
  opacity: 0;
}
#fade-me-in {
  opacity: 1;
  transition: opacity 1s ease-out;
}
</style>
<button id="fade-me-in"
        class="btn primary"
        hx-post="/fade_in_demo"
        hx-swap="outerHTML settle:1s">
        Fade Me In
</button>

#範例

#請求執行中動畫

您也可以利用 htmx-request 類別，該類別會應用於觸發請求的元素。下面是一個表單，在提交時會變更其外觀，以指示正在處理請求

<style>
  form.htmx-request {
    opacity: .5;
    transition: opacity 300ms linear;
  }
</style>
<form hx-post="/name" hx-swap="outerHTML">
<label>Name:</label><input name="name"><br/>
<button class="btn primary">Submit</button>
</form>

#範例

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

#範例

切換範例

#使用視圖過渡 API

htmx 透過 hx-swap 屬性的 transition 選項，提供對新的視圖過渡 API 的存取。

以下是一個使用視圖過渡的交換範例。過渡透過 CSS 中的 view-transition-name 屬性與外部 div 相關聯，並且該過渡是根據 ::view-transition-old 和 ::view-transition-new 定義的，使用 @keyframes 來定義動畫。（關於視圖過渡 API 的更完整詳細資訊，可以在關於它們的 Chrome 開發人員頁面上找到。）

此過渡的舊內容應滑出至左側，新內容應從右側滑入。

請注意，截至撰寫本文時，視覺過渡僅會在 Chrome 111+ 上發生，但預計未來會有更多瀏覽器實作此功能。

<style>
   @keyframes fade-in {
     from { opacity: 0; }
   }

   @keyframes fade-out {
     to { opacity: 0; }
   }

   @keyframes slide-from-right {
     from { transform: translateX(90px); }
   }

   @keyframes slide-to-left {
     to { transform: translateX(-90px); }
   }

   .slide-it {
     view-transition-name: slide-it;
   }

   ::view-transition-old(slide-it) {
     animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
   }
   ::view-transition-new(slide-it) {
     animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
     600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }
</style>


<div class="slide-it">
   <h1>Initial Content</h1>
   <button class="btn primary" hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
     Swap It!
   </button>
</div>

#範例

初始內容

#結論

您可以使用上述技巧，在使用 htmx 時，以簡單的 HTML 建立許多有趣且令人愉悅的效果。

動畫