exit-animations

終了アニメーション

要素を画面から消す際に、ディズニーの12の原則を適用します。

原則の適用

スクワッシュ＆ストレッチ：終了時に95～98％まで縮小します。要素は消える際にわずかに圧縮されます。

予備動作：消える前に短い間や微細な動きを入れます。50msのためらいを加えることで、終了を認識しやすくなります。

演出：論理的な移動先に向けて終了させます。削除した項目は下に落とし、閉じるモーダルは起点まで縮小し、サイドバーは端まで戻します。

ストレートアヘッドとポーズ・トゥ・ポーズ：表示状態から非表示状態への明確な変化を設けた、ポーズ・トゥ・ポーズのアニメーションにします。終了時の軌道を計画します。

フォロースルーとオーバーラッピング：コンテンツをコンテナーより先に終了させます。カードが折りたたまれる50ms前にテキストをフェードアウトさせます。

スローイン・スローアウト：終了時はイーズインを使います。穏やかに始まり、加速しながら消えていきます：cubic-bezier(0.4, 0, 1, 1)。

アーク：直線ではなく、曲線に沿って終了させます。閉じる通知は、上方向へ弧を描いて消えます。

二次動作：不透明度のフェードと方向性のある動きを組み合わせます。フェードだけでは、エラーのように感じられます。

タイミング：

• 終了アニメーションは、開始アニメーションより20～30％速くします
• クイック終了：100～150ms（ツールチップ、ドロップダウン）
• 標準の終了：150～200ms（モーダル、トースト）
• ゆったりとした終了：200～300ms（ページ遷移）

誇張：劇的に消す場合は0.9まで縮小し、控えめに閉じる場合は0.97まで縮小します。

堅実な描写：空間的な論理を保ちます。要素は、現れたときと同じ経路、または「あるべき」場所へ向かって消えるようにします。

アピール：終了アニメーションで、ユーザーの意図を確認できるようにします。閉じる動作は唐突ではなく、意図が伝わるものにします。

タイミングの推奨値

要素の種類	期間	イージング	備考
ツールチップ	100ms	ease-in	開始時より速くします
ドロップダウン	150ms	ease-in	上方向に折りたたみます
トースト	150ms	ease-in	起点へスライドさせます
モーダル	200ms	ease-in	コンテンツを先に、オーバーレイを最後に終了させます
削除した項目	200ms	ease-in	フェードアウト後に高さを折りたたみます
ページ	250ms	ease-in	現在のページが終了してから、新しいページが表示されます

実装パターン

.exiting {
  animation: exit 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}

折りたたみパターン

リスト項目を削除する場合：

1. コンテンツをフェードアウトします（150ms）
2. 高さを折りたたみます（150ms、100ms後に開始）
3. アニメーション完了後にDOMから削除します

体感時間の合計：250ms。終了アニメーションを滑らかにするため、必ず will-change: opacity, transform を使用します。