过渡事件会通知您过渡状态的变化。
当 VisualElement 的样式属性被修改时，UI 工具包会使用过渡。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 秒，则 TransitionRunEvent 和 TransitionStartEvent 会以 elapsedTime 属性设置为 3 秒发送，并且过渡实际上从五秒动画的第三秒开始。
本节描述了每个过渡事件的 target、stylePropertyNames 和 elapsedTime。
创建过渡时会发送 TransitionRunEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。过渡的延迟阶段结束且过渡开始时会发送 TransitionStartEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。过渡结束时会发送 TransitionEndEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。当属性再次更改中断过渡时，会发送 TransitionCancelEvent 事件。
target：执行过渡的元素。stylePropertyNames：过渡修改的属性列表。elapsedTime：自过渡开始以来的时间。TransitionEndEvent 创建循环过渡。