遷移イベント

遷移イベントは、遷移の状態の変化を知らせます。

UI Toolkit は、VisualElement のスタイルプロパティが変更されたときに遷移を使用します。VisualElement のプロパティの変更は、即座に視覚的に反映されます。ただし、transition USS プロパティ を使用すると、初期結果と終了結果の間を徐々に補間することができます。

遷移のライフサイクル

遷移のライフサイクルには以下のような段階があります。

1. 以下の場合、VisualElement のプロパティが変更されます。

   • C# メソッドでクラスを追加または削除する場合。例: element.ToggleInClassList() (element は任意の VisualElement)。
   • :hover などのセレクターとともに USS を使用する場合。
   • 要素の style プロパティを操作する場合。例: element.style.backgroundColor = Color.red; (element は任意の VisualElement)。

2. TransitionRunEvent が送信されます。

3. 変更するプロパティの解決済みの transition-delay プロパティに 0 以外の値が含まれる場合、遅延時間の間は何も発生しません。

4. 遅延後、TransitionStartEvent が送信され、初期値のプロパティ状態で遷移が開始されます。

5. transition-duration で設定された時間の間、遷移が発生します。その間に、プロパティは初期値から最終値に移行します。

6. 遷移中にプロパティが新しい値に変更されると、TransitionCancelEvent が送信されます。遷移プロセスはステップ 2 から再開されます。

7. transition-duration が経過すると、プロパティは最終値に設定されます。TransitionEndEvent が送信されます。

遷移イベントリファレンス表

以下の表は、遷移イベントとその伝播段階を示しています。

動作

各遷移プロパティには、独自のライフサイクルと独自の遷移イベントがあります。現在のプロパティにアクセスするには、イベントの 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

TransitionRunEvent イベントは遷移の作成時に送信されます。

• target: 遷移を実行する要素。
• stylePropertyNames: 遷移によって変更されたプロパティのリスト。
• elapsedTime: 遷移の開始からの時間。

TransitionStartEvent

TransitionStartEvent イベントは、遷移の遅延フェーズが終了し、遷移が開始されると送信されます。

• target: 遷移を実行する要素。
• stylePropertyNames: 遷移によって変更されたプロパティのリスト。
• elapsedTime: 遷移の開始からの時間。

TransitionEndEvent

TransitionEndEvent イベントは遷移の終了時に送信されます。

• target: 遷移を実行する要素。
• stylePropertyNames: 遷移によって変更されたプロパティのリスト。
• elapsedTime: 遷移の開始からの時間。

TransitionCancelEvent

TransitionCancelEvent イベントは、プロパティが再度変更されたことによって遷移が中断されたときに送信されます。

• target: 遷移を実行する要素。
• stylePropertyNames: 遷移によって変更されたプロパティのリスト。
• elapsedTime: 遷移の開始からの時間。

例

• 遷移イベントの作成: この例では、遷移イベントのライフサイクルを示します。
• ループ遷移の作成: この例では、TransitionEndEvent を使用してループする遷移を作成する方法を示します。
• UI Builder と C# スクリプトによる簡単な遷移の作成: この例では、UI Builder と C# スクリプトを使用して簡単な遷移を作成する方法を示します。

追加リソース

• USS 遷移