Turbo Transition은 웹 표준의 커스텀 요소를 활용하여 구현됩니다. 이는 개발자가 자신만의 HTML 태그를 정의하고 내장된 동작을 추가할 수 있게 합니다. 핵심적으로 TurboTransition 클래스는 HTMLElement를 상속받으며, 요소가 DOM에 추가될 때 호출되는 connectedCallback() 메서드와 요소가 제거될 때 호출되는 remove() 메서드를 오버라이드하여 전환 애니메이션을 관리합니다.
전환 과정은 비동기 #transition 메서드를 통해 제어됩니다. 이 메서드는 turbo-transition 내부에 포함된 첫 번째 자식 요소를 대상으로 하며, 해당 요소의 속성에서 정의된 CSS 클래스를 가져와 애니메이션을 실행합니다. 특히 요소 제거 시의 애니메이션 처리가 주목할 만합니다. remove() 메서드는 원본 요소를 DOM에서 제거하기 전에 해당 요소를 복제하고, 이 복제본에 대해 leave 전환 애니메이션을 실행합니다. 애니메이션 완료 후 복제본은 DOM에서 제거되어, 사용자는 원본 요소가 사라지는 동안에도 부드러운 전환 효과를 경험할 수 있습니다.
전환 클래스 적용은 utilities.js에 정의된 run 메서드를 통해 정교하게 제어됩니다. 이 메서드는 초기 상태 적용, 브라우저의 다음 프레임 대기, 최종 상태로의 전환, 애니메이션 완료 대기, 그리고 최종적으로 클래스 정리의 순서로 진행됩니다. 이러한 체계적인 접근 방식은 Turbo Frames 및 Turbo Streams와 완벽하게 통합되어 안정적이고 시각적으로 매력적인 전환 효과를 보장합니다.