Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する

Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン

[coliss]

各パネルをクリックすると伸び縮みしながら配置が入れ替わる、View Transitions APIを使用して実装されたデモ。

[toblog]

CSSだけで完結しないところがなんとも。

[Shinwiki]

ちったぁ住み分けってもんを考えろよクソが

[neco_modoki]

CSS、IE大先輩が勇退してから伸び伸びとしておられるな

[ultimatebreak]

最近のCSSついていけないおじさん