§16-16Motion
Skeleton → fade in
読み込み中の骨組みから実データへ滑らかに切り替える。
待ち時間に画面の形を先に見せて、完成時の切り替えを穏やかにする。表示がいきなり現れて目が泳ぐ問題に効く。
実装のポイント
スケルトンは実コンテンツと同じ寸法で組み、差し替え時のレイアウトシフトを防ぐ。差し替え後は opacity の短い transition で実データをフェードインさせる。
- 特徴
- アニメーション
- 非同期
- モック
- デモで使っているもの
- shadcn/ui
- lucide-react