전환 이벤트는 전환 상태의 변경 사항을 알려줍니다.
UI 툴킷은 ’VisualElement’의 스타일 프로퍼티가 수정될 때 전환을 사용합니다.VisualElement 프로퍼티에 대한 변경 사항은 즉시 시각적으로 반영됩니다.그러나 transition USS 프로퍼티를 사용하여 초기 결과와 최종 결과 사이를 점진적으로 보간할 수 있습니다.
전환의 수명 주기에는 다음과 같은 단계가 있습니다.
다음과 같은 경우 VisualElement의 프로퍼티가 수정됩니다.
element.ToggleInClassList() (where element is any VisualElement).:hover와 같은 선택자와 함께 USS 사용style 프로퍼티 조작예시:element.style.backgroundColor = Color.red; (where element is any 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’가 전송되고 5초 애니메이션의 3초에서 전환이 효과적으로 시작됩니다.
이 섹션에서는 각 전환 이벤트의 target, stylePropertyNames, elapsedTime에 대해 설명합니다.
전환이 생성될 때 TransitionRunEvent 이벤트가 전송됩니다.
target:전환을 실행하는 요소입니다.stylePropertyNames:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime:전환이 시작된 이후의 시간입니다.전환의 지연 단계가 끝나고 전환이 시작될 때 TransitionStartEvent 이벤트가 전송됩니다.
target:전환을 실행하는 요소입니다.stylePropertyNames:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime:전환이 시작된 이후의 시간입니다.전환이 끝날 때 TransitionEndEvent 이벤트가 전송됩니다.
target:전환을 실행하는 요소입니다.stylePropertyNames:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime:전환이 시작된 이후의 시간입니다.다시 변경되는 프로퍼티에 의해 전환이 중단되면 TransitionCancelEvent 이벤트가 전송됩니다.
target:전환을 실행하는 요소입니다.stylePropertyNames:전환에 의해 수정되는 프로퍼티 리스트입니다.elapsedTime:전환이 시작된 이후의 시간입니다.TransitionEndEvent를 활용하여 루핑되는 전환을 만드는 방법을 보여줍니다.