0Pricing
Angular Academy · レッスン

アニメーションの基礎：triggerとstate

アニメーションの状態とトリガーを定義します

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

Angularアニメーション

Angularのアニメーションシステムは、Web Animations APIを基盤とする宣言的なDSLです。状態とトランジションを記述すると、AngularがタイミングとDOMの更新を処理します。

セットアップ

bootstrap設定でアニメーションを提供し、アニメーションエンジンを有効にします。

bootstrapApplication(AppComponent, {
  providers: [provideAnimationsAsync()]
});

trigger

triggerはアニメーションに名前を付け、その状態とトランジションをまとめます。バインディングを使って要素に適用します。

animations: [
  trigger('openClose', [
    // states and transitions
  ])
]

状態を定義する

stateは、名前付きの状態と、その状態の間に要素が持つCSSスタイルのセットを対応付けます。

state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))

style関数

styleはCSSプロパティのオブジェクトを受け取ります。キーにはcamelCase形式または引用符で囲んだCSS名を使用します。

style({ backgroundColor: '#1976d2', transform: 'scale(1)' })

triggerをバインドする

テンプレートで、@triggerNameを現在の状態を返す式にバインドします。

<div [@openClose]="isOpen ? 'open' : 'closed'">
  Content
</div>

完全なtrigger

ここでは、2つの状態と、それらの間のトランジションを持つtriggerを示します。

trigger('openClose', [
  state('open', style({ height: '200px' })),
  state('closed', style({ height: '0px' })),
  transition('open <=> closed', animate('300ms ease'))
])

コンポーネントから状態を操作する

コンポーネントではbooleanまたは文字列を切り替えるだけで、Angularが対応する状態のスタイル間を補間します。

isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }

ワイルドカード状態

ワイルドカード*は任意の状態に一致します。デフォルトや、後で扱うenter/leaveアニメーションに便利です。

state('*', style({ opacity: 1 }))

void状態

特殊なvoid状態は、DOMに存在しない要素を表します。enterアニメーションとleaveアニメーションの基盤となる状態です。

宣言的アニメーションの利点

宣言的アニメーションを使うと、タイミングのロジックをコンポーネントの外に置けます。また、Angularのライフサイクルと統合され、要素がDOMから離れるときの後処理も自動的に行われます。

クイックチェック

アニメーションの基本についての理解度を確認しましょう。

まとめ

Angularのアニメーションでは、state定義（それぞれが名前とstyleを対応付けます）を含むtriggerを使用し、テンプレートで[@trigger]を介してバインドすることを学びました。void状態と*状態は、それぞれ要素が存在しない場合と任意の状態を表します。

よくある質問

「アニメーションの基礎：triggerとstate」レッスンは無料ですか？

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

「アニメーションの基礎：triggerとstate」で何を学びますか？

アニメーションの状態とトリガーを定義します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「アニメーションの基礎：triggerとstate」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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