События переходного периода

События перехода сообщают вам об изменениях состояния перехода.

UI Toolkit использует переходы при изменении свойства стиля VisualElement. Изменения в свойстве VisualElement немедленно отражаются визуально. Однако вы можете использовать свойства transition USS для постепенной интерполяции между начальным и конечным результатами.

Жизненный цикл перехода

Жизненный цикл перехода состоит из следующих этапов:

1. Свойство VisualElementизменяется, когда вы:

   • Добавляйте и удаляйте класс методами C#. Например: element.ToggleInClassList() (где element является любым VisualElement).
   • Используйте USS с селекторами типа :hover.
   • Манипулируйте свойством 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.

Справочная таблица событий переходного периода

В нижеследующей таблице описываются переходные события и фазы их распространения:

Мероприятие	Описание	Просыпается	Пузырьки вверх	Аннулируемые
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 секунд, и переход фактически начинается на третьей секунде пятисекундной анимации.

Список событий

В этом разделе описываются target, stylePropertyNamesи elapsedTime каждого события перехода.

TransitionRunEvent

Событие TransitionRunEvent отправляется при создании перехода.

• target: Элемент, который выполняет переход.
• stylePropertyNames: Список свойств, изменённых переходом.
• elapsedTime: время, прошедшее с момента начала перехода.

TransitionStartEvent

Событие TransitionStartEvent отправляется, когда фаза задержки перехода заканчивается и переход начинается.

• target: Элемент, который выполняет переход.
• stylePropertyNames: Список свойств, изменённых переходом.
• elapsedTime: время, прошедшее с момента начала перехода.

TransitionEndEvent

Событие TransitionEndEvent отправляется, когда переход заканчивается.

• target: Элемент, который выполняет переход.
• stylePropertyNames: Список свойств, изменённых переходом.
• elapsedTime: время, прошедшее с момента начала перехода.

Примечание: TransitionEndEvent может не запуститься, если нет предыдущего состояния стиля, от которого выполнять переход, — например, когда стиль применяется впервые или меняется без начального значения. Так происходит потому, что UI Toolkit пропускает переход, если не может обнаружить изменение относительно кэшированного значения. Чтобы обойти это, задайте начальное значение стиля перед изменением, которое запускает переход, либо отложите изменение с помощью schedule.Execute.

TransitionCancelEvent

Событие TransitionCancelEvent отправляется, когда переход прерывается из-за повторного изменения свойства.

• target: Элемент, который выполняет переход.
• stylePropertyNames: Список свойств, изменённых переходом.
• elapsedTime: время, прошедшее с момента начала перехода.

Примеры

• Создание события перехода: Этот пример демонстрирует жизненный цикл события перехода.
• Создание циклических переходов: Этот пример демонстрирует, как использовать TransitionEndEvent для создания циклических переходов.
• Создание простого перехода с помощью скриптов UI Builder и C#: В этом примере показано, как создать простые переходы с помощью скриптов UI Builder и C#.

Дополнительные ресурсы

• USS переходный период