지금까지 DOM 요소를 비집고 들어가 대상이 되는 요소를 탐색하거나, 요소에 클래스를 직접 할당한 다음 해당 요소에 애니메이션을 적용하면서 페이지 전환 애니메이션을 구현하였습니다.
단, 프로젝트를 진행하려다 보면 이런 애니메이션들이 많으면 많아질수록 복잡도는 올라가기 때문에, 그 과정에서 코드는 더러워지고 꼴보기 싫은(?) 코드가 되어버릴 것입니다.
화면 기록 2024-08-20 오후 6.38.17.mov
이런 문제를 해결하기 위해서 View Transition API가 등장했습니다!😎
위 영상만 보더라도 전보다 훨~씬 부드럽게 페이지가 전환되는 모습을 볼 수 있죠?
View Transitions API에 대해 본격적으로 알아보기 전에 먼저 반드시 알고 넘어가야 하는 점이 있습니다. 바로 이 Web API가 아직 표준 스펙이 아니라 실험적 API라는 사실입니다. 현재로선 MDN 기준 Chrome(111), Edge(111), Chrome Android(111) 최신(23.04.03 기준) 브라우저만 지원하고 있습니다. 그 외 브라우저에서는 아직 사용할 수 없다는 사실을 명심해야 합니다.
View Transition API는 웹 애플리케이션에서 페이지 전환, 화면 전환 또는 콘텐츠 변경 시 부드럽고 자연스러운 애니메이션을 제공하기 위해 사용되는 최신 웹 기술입니다. 이 API를 사용하면, 페이지 간 또는 콘텐츠 간 전환을 할 때 애니메이션 효과를 쉽게 적용할 수 있으며, 사용자가 보다 부드럽고 몰입감 있는 사용자 경험을 느낄 수 있습니다.
@view-transition@view-transition은 View Transition API의 설정을 정의하는 CSS 규칙입니다. 이 규칙을 통해 페이지 전환 시 애니메이션 동작을 자동으로 적용할지 여부 등을 지정할 수 있습니다.
@view-transition {
navigation: auto;
}
navigation: auto;: 페이지 간의 내비게이션 전환에 대해 자동으로 애니메이션을 적용합니다.::view-transition-group(root)::view-transition-group은 전체 전환 그룹을 정의하는 데 사용됩니다. 이 그룹은 전환 애니메이션의 타이밍, 지속 시간 등을 제어합니다.