htmx と View Transitions API
昨日の a-blog cms LIVE Vol.18 で htmx と View Transitions API のことが話題になりました。View Transitions API は新技術で2024年7月現在ではまだ使えるブラウザーが限られていますが、少なくとも Chrome ではすでに htmx との組み合わせで試してみることができます。
hx-swap属性に hx-swap="innerHTML transition:true" というふうに書くだけで Chrome ではswap時にふわっとする、というのはドキュメントにはないのですが目視で実際にそうでした（すみません）。FireFox と Safari ではダメで、edge はOKでした！ このエントリーではその「ふわっ」をちょっとだけカスタマイズしてみることにします。
htmxのswap全体にtransition:trueを効かせる
htmxを読み込んだあとに
htmx.config.globalViewTransitions = true;
と1行書くことで、htmxのswap属性に transition:true を書かなくても全体的に View Transitions API が効くようになります。
勉強会用のテスト環境 でいうと、/themes/workshop@blog/include/head/js.html に追記すればOKです。
「ふわっ」のdurationなどをカスタマイズする
「ふわっ」をカスタマイズするのは案外簡単でした。htmxのオフィシャルのドキュメントの例を少し変えただけです。 /themes/workshop@blog/include/head/link.html に次のように追記してください。今回の勉強会のソース用に #transition とIDで書いていますが、実際には .cross-fade のようなクラスにしてふわっとさせたい要素全部に効かせるのが良さそうです。
@keyframes fade-in {
from { opacity: 0; }
}
@keyframes fade-out {
to { opacity: 0; }
}
/* define animations for the old and new content */
::view-transition-old(cross-fade) {
animation: 400ms ease-in-out both fade-out
}
::view-transition-new(cross-fade) {
animation: 400ms ease-in-out both fade-in
}
/* tie the view transition to a given CSS class */
#transition {
view-transition-name: cross-fade;
}結論
つまり、JSに1行書くだけで Chrome と edge では「ふわっ」とswapしますし、CSSに20行ほど追記すればそのdurationなどもカスタマイズすることができます。近い将来にはこれで他のブラウザでもhtmxでのswapは「ふわっ」とすることになるはずです。
