🎨 anime.js v4 AutoLayoutデモ
レイアウト変化を自動でアニメーション。9つのインタラクティブデモを体験できます
1️⃣ グリッド ⇔ リスト切り替え
AutoLayout機能: grid-template-columnsの変化を自動でアニメーション。 各アイテムがスムーズに新しい位置へ移動します。
2️⃣ アコーディオン
AutoLayout機能: display: none/blockの変化で、高さが自動計算されスムーズに開閉します。
3️⃣ フィルタブルグリッド
AutoLayout機能: 要素の表示/非表示時に、残りの要素が自動で再配置されます。 stagger効果で時間差アニメーション。
4️⃣ リスト並び替え
AutoLayout機能: DOM要素の順序が変わる際、各要素が新しい位置へスムーズに移動します。
5️⃣ モーダル開閉
AutoLayout機能: display: noneからblockへの変化をアニメーション。 背景のフェード + コンテンツのスケールで立体的な演出。