Version: 2023.1
언어: 한국어
툴팁 이벤트
컨텍스트 메뉴 이벤트

전환 이벤트

전환 이벤트는 전환 상태의 변경 사항을 알려줍니다.

UI 툴킷은 ’VisualElement’의 스타일 프로퍼티가 수정될 때 전환을 사용합니다.VisualElement 프로퍼티에 대한 변경 사항은 즉시 시각적으로 반영됩니다.그러나 transition USS 프로퍼티를 사용하여 초기 결과와 최종 결과 사이를 점진적으로 보간할 수 있습니다.

전환의 수명 주기

전환의 수명 주기에는 다음과 같은 단계가 있습니다.

  1. 다음과 같은 경우 VisualElement의 프로퍼티가 수정됩니다.

    • C# 메서드로 클래스를 추가하거나 제거예시:element.ToggleInClassList() (where element is any VisualElement).
    • :hover와 같은 선택자와 함께 USS 사용
    • 요소의 style 프로퍼티 조작예시:element.style.backgroundColor = Color.red; (where element is any 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-delay0으로 설정하면 TransitionRunEventTransitionStartEvent가 몇 밀리초 내에 차례로 전송됩니다.

transition-delay0보다 낮은 값으로 설정하면 전환이 처음부터 시작되지 않습니다.예를 들어, ‘transition-delay’가 ’–3’초이고 transition-duration이 ’5’초인 경우, elapsedTime 프로퍼티가 ’3’초로 설정된 ’TransitionRunEvent’와 ’TransitionStartEvent’가 전송되고 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:전환이 시작된 이후의 시간입니다.

예제

추가 리소스

툴팁 이벤트
컨텍스트 메뉴 이벤트