htmx は、CSS と HTML のみを使用して、CSS トランジションを使用して Web ページに滑らかなアニメーションとトランジションを追加できるように設計されています。以下に、さまざまなアニメーション技術の例をいくつか示します。
htmx では、新しい View Transitions API を使用してアニメーションを作成することもできます。
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 へのスタイルの更新に適用され、それらの間で滑らかにトランジションするように入れ替えを構成します。
プログレスバーのデモでは、プログレスバー要素の length プロパティを更新することにより、この基本的な CSS アニメーション技術も使用しており、スムーズなアニメーションを可能にしています。
リクエストが終了したときに削除される要素をフェードアウトさせたい場合は、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>
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>
htmx は、hx-swap 属性の transition オプションを介して、新しい View Transitions API へのアクセスを提供します。
以下は、ビュー遷移を使用する入れ替えの例です。遷移は、CSS の view-transition-name プロパティを介して外側の div に関連付けられ、その遷移は ::view-transition-old と ::view-transition-new の観点で定義され、アニメーションを定義するために @keyframes を使用します。（View Transition API の詳細については、Chrome Developer Page を参照してください。）
この遷移の古いコンテンツは左にスライドアウトし、新しいコンテンツは右からスライドインする必要があります。
執筆時点では、視覚的な遷移は 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 で非常に多くの興味深く楽しいエフェクトを作成できます。