过渡事件会告知您过渡状态的变化。
UI 工具包在修改 VisualElement 的样式属性时使用过渡。对 VisualElement 属性的更改会立即直观体现。但是，您可以使用 transition USS 属性在初始结果和最终结果之间逐步插值。
过渡的生命周期包括以下几个阶段：
当您执行以下操作时，会修改 VisualElement 的属性：
element.ToggleInClassList()（其中 element 是任何 VisualElement）。:hover 等选择器结合使用。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 秒，则会在 elapsedTime 属性设置为 3 秒发送 TransitionRunEvent 和 TransitionStartEvent，并且过渡实际上从五秒动画的第三秒开始。
本节介绍每个过渡事件的 target、stylePropertyNames 和 elapsedTime。
创建过渡时发送 TransitionRunEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。当过渡的延迟阶段结束和过渡开始时发送 TransitionStartEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。过渡结束时发送 TransitionEndEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。当过渡因属性再次更改而中断时，将发送 TransitionCancelEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。TransitionEndEvent 创建循环过渡。