パネルとドロワーのスライドインアニメーションイージング

スライドインパネルイージング

サイドパネル、ナビゲーションドロワー、オフキャンバスメニューには、スライドモーションが自然に感じられるイージングカーブが必要です — 素早い入場と穏やかな停止。

推奨カーブ

transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);

このカスタムカーブはMaterial Decelerateカーブよりもさらに速い開始を提供し、延長されたスムーズな減速を伴います。パネルがビューに「投げ込まれ」、摩擦でキャッチされたような感覚です。

スライドインカーブの比較

カーブ	値	特性
ease-out	(0, 0, 0.58, 1)	標準的、やや硬い
Material Decelerate	(0, 0, 0.2, 1)	Google スタイル、自然
カスタムスライドイン	(0.05, 0.7, 0.1, 1)	高速入場、非常にスムーズな着地

コード例：ナビゲーションドロワー

.drawer {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 280px;
  transform: translateX(-100%);
  transition: transform 350ms cubic-bezier(0.05, 0.7, 0.1, 1);
}
.drawer.open {
  transform: translateX(0);
}

スライドアウト（閉じる）

閉じるアニメーションには、補完的な加速カーブを使用します：

.drawer.closing {
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1);
}

閉じるアニメーションはより速く（250ms vs 350ms）、加速カーブを使用して、パネルが去るにつれて速度が上がるようにします。

パフォーマンスのヒント

left / rightの代わりに常にtransformをアニメーションしてください。transformはGPUアクセラレーションされ、レイアウト再計算をトリガーしません。