0Pricing
Angular Academy · レッスン

トランジションとタイミング

トランジションで状態間をアニメーションさせます

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

状態間をアニメーションさせる

状態は要素がどこに落ち着くかを表し、トランジションは状態間をどのように移動するかを表します。transition関数は、状態の変化とアニメーションを結び付けます。

transition関数

transitionは、状態変更の式と1つ以上のアニメーション手順を受け取ります。

transition('closed => open', animate('300ms'))

方向演算子

一方向には=>を、双方向には<=>を使用します。

transition('open <=> closed', animate('250ms ease-in-out'))

animate関数

animateは、時間、任意の遅延、イージングを定義します。文字列の形式は"duration delay easing"です。

animate('500ms 100ms ease-out')

時間の単位

時間にはmsまたはsを指定できます。単位のない数値はミリ秒として扱われます。

animate('0.4s')
animate('400ms')
animate(400)

イージング関数

イージングは加速の仕方を制御します。linear、ease、ease-in、ease-out、ease-in-out、またはcubic-bezier()を使用できます。

animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')

インラインの適用先スタイル

animateには2番目のstyle引数を指定できます。これにより、名前付き状態に結び付いていないスタイルへアニメーションさせられます。

transition('* => active', [
  animate('300ms', style({ transform: 'scale(1.1)' }))
])

複数の手順

手順の配列を渡すと、1つのトランジション内で一連のアニメーションを実行できます。

transition('closed => open', [
  style({ opacity: 0 }),
  animate('300ms', style({ opacity: 1 }))
])

ワイルドカードトランジション

*を使うと、任意の状態から、または任意の状態へのトランジションに一致します。一般的なenterエフェクトに便利です。

transition('* => open', animate('200ms'))

開始時のスタイル

animate()の前に単独のstyle()を置くと開始地点が設定され、その後Angularが目的の状態のスタイルまでアニメーションさせます。

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

タイミングのベストプラクティス

UIのトランジションは、応答性を保つため短く（150～300ミリ秒）してください。長い時間は、大きく意図的に動かす場合に限って使用します。目的の印象に合うイージングを選びます。

クイックチェック

トランジションとタイミングについての理解度を確認しましょう。

まとめ

transitionによって状態の変化（=>または<=>）とanimateの手順を結び付けることを学びました。タイミング文字列はduration delay easingの順で、styleとanimateの手順を連結してシーケンスを作成できます。

よくある質問

「トランジションとタイミング」レッスンは無料ですか？

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

「トランジションとタイミング」で何を学びますか？

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

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

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

「トランジションとタイミング」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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