遷移イベントは、遷移の状態の変化を知らせます。
UI Toolkit は、VisualElement の style プロパティが変更されるときに遷移を使用します。VisualElement のプロパティの変更は、即座に視覚的に反映されます。ただし、transition USS プロパティ を使用すると、初期結果と終了結果を徐々に補間することができます。
遷移のライフサイクルには、以下のような段階があります。
VisualElement のプロパティが以下の場合に変更されます。
element.ToggleInClassList() (element は任意の VisualElement)。:hover のようなセレクターを使い USS を使用する場合。style プロパティを操作する場合。例えば、element.style.backgroundColor = Color.red; (element は任意の VisualElement)。TransitionRunEvent が送信されます。
変更されたプロパティの解決された transition-delay プロパティが 0 以外の値を持つ場合、遅延時間の間は何も発生しません。
遅延後、TransitionStartEvent が送信され、初期値のプロパティ状態で遷移が開始されます。
transition-duration で設定された時間の間、遷移が発生します。その間に，プロパティは初期値から最終値へと移行します。
遷移中にプロパティが新しい値に変更された場合、TransitionCancelEvent が送信されます。遷移処理はステップ 2 から再開されます。
Transition-duration が経過すると、プロパティは最終的な値に設定されます。TransitionEndEvent が送信されます。
次の表は、遷移イベントとその伝播フェーズを説明したものです。
| イベント | 説明 | 下降伝播 | 上昇伝播 | キャンセル可能 |
|---|---|---|---|---|
| TransitionRunEvent | 遷移が作成されたときに送信されます。 | 可 | ||
| TransitionStartEvent | 遷移の遅延段階が終了し、遷移が開始されるときに送信されます。 | 可 | ||
| TransitionEndEvent | 遷移が終了するときに送信されます。 | 可 | ||
| TransitionCancelEvent | 遷移がキャンセルされたときに送信されます。 | 可 |
各遷移プロパティは独自のライフサイクルと独自の遷移イベントを持ちます。現在のプロパティにアクセスするには、イベントの stylePropertyNames プロパティを使用します。
ショートハンドの USS プロパティが変更されると、すべてのコンポーネントも独自のライフサイクルを取得します。例えば、margin、margin-left、margin-right、margin-top、margin-bottom を変更すると、これらのコンポーネントは独自の TransitionRunEvent 、TransitionStartEvent、TransitionEndEvent、つまり、合計 12 の個別のイベントを取得します。
transition-delay を 0 とすると、TransitionRunEvent と TransitionStartEvent が数ミリ秒のうちに次々と送信されます。
transition-delay を 0 以下の値に設定すると、遷移は最初からは開始されません。例えば、transition-delay を -3 秒、 transition-duration を 5 秒に設定すると、TransitionRunEvent と TransitionStartEvent は elapsedTime プロパティが 3 秒に設定された状態で送信され、5 秒のアニメーション の 3 秒目で遷移が開始されます。
ここでは、各遷移イベントの target、stylePropertyNames、elapsedTime について説明します。
TransitionRunEvent イベントは、遷移が作成されたときに送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。TransitionStartEvent イベントは、遷移の遅延段階が終了し、遷移が開始されると送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。TransitionEndEvent イベントは、遷移が終了したときに送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。TransitionCancelEvent イベントは、プロパティが再び変更されることによって遷移が中断されたときに送信されます。
target: 遷移を実行する要素。stylePropertyNames: 遷移によって変更されるプロパティのリスト。elapsedTime: 遷移開始からの時間。TransitionEndEvent を活用して、ループする遷移を作成する方法を紹介します。