0Pricing
Angular Academy · レッスン

入場と退場のアニメーション

要素の入場と退場をアニメーションさせます

「入場と退場のアニメーション」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

表示・非表示のアニメーション

リストへの項目の追加や削除など、要素の表示時や非表示時にアニメーションさせたいことがよくあります。Angularでは、そのために:enterと:leaveのエイリアスが用意されています。

voidと表示状態

DOMに存在しない要素はvoid状態にあります。表示されるときはvoid => *、非表示になるときは* => voidです。

:enterエイリアス

:enterはvoid => *の省略形です。要素が追加されるときのアニメーションに使用します。

transition(':enter', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

:leaveエイリアス

:leaveは* => voidの省略形です。Angularはleaveアニメーションが完了するまで要素をDOM内に保持します。

transition(':leave', [
  animate('300ms', style({ opacity: 0 }))
])

制御フローでトリガーする

@ifや@forで管理される要素にtriggerを適用します。要素の追加や削除によってenter/leaveが発生します。

@if (visible()) {
  <div [@fade]>Hello</div>
}

フェード用trigger

再利用可能なフェードイン／フェードアウト用triggerを示します。

trigger('fade', [
  transition(':enter', [
    style({ opacity: 0 }),
    animate('200ms', style({ opacity: 1 }))
  ]),
  transition(':leave', [
    animate('200ms', style({ opacity: 0 }))
  ])
])

スライドインの例

transformとopacityを組み合わせて、表示時にスライドインする効果を作成します。

transition(':enter', [
  style({ transform: 'translateY(-10px)', opacity: 0 }),
  animate('250ms ease-out',
    style({ transform: 'translateY(0)', opacity: 1 }))
])

リスト項目のアニメーション

@for内の各項目にtriggerを配置すると、項目の追加や削除時にそれぞれ独立してアニメーションします。

@for (item of items(); track item.id) {
  <li [@fade]>{{ item.name }}</li>
}

leaveにエンジンが必要な理由

通常、削除された要素はすぐに消えます。アニメーションエンジンは削除を受け取り、ノードを保持して:leaveアニメーションを実行してから削除します。これらはすべて自動的に行われます。

アニメーションを無効にする

@.disabledをバインドすると、条件に応じてアニメーションをスキップできます。モーション軽減の設定や初回レンダリングに便利です。

<div [@.disabled]="prefersReducedMotion">...</div>

ベストプラクティス

enter/leaveは短く控えめにしてください。prefers-reduced-motionを尊重します。滑らかに動かすには、レイアウトプロパティではなく、GPUで処理しやすいtransformとopacityをアニメーションさせてください。

クイックチェック

enterアニメーションとleaveアニメーションについての理解度を確認します。

まとめ

:enter（void => *）と:leave（* => void）は、要素が追加・削除される際にアニメーションし、@if／@forと連携することを学びました。エンジンは、leaveするノードのアニメーションが完了するまで、そのノードを保持します。

よくある質問

「入場と退場のアニメーション」レッスンは無料ですか？

はい。「入場と退場のアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「入場と退場のアニメーション」で何を学びますか？

要素の入場と退場をアニメーションさせます ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「入場と退場のアニメーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. アニメーションの基礎：triggerとstate
  2. トランジションとタイミング
  3. 入場と退場のアニメーション
  4. キーフレームとスタガー
← Angular Academyに戻る