TIL 2022-05-17 Web Page Transition

 

 

IOS, 안드로이드 등의 네이티브 앱들은 페이지간의 Transition이 굉장히 자연스러운데, web에서는 click and pop의 형식으로 페이지 이동하는 경우가 많아서 아쉬움!

이런 페이지간 Transition은 효과를 통해 각 페이지가 어떠한 관계를 가지고 있는지 등을 알려줄수 있는 효과적인 방법인데 이거를 하기 어려움.

각 페이지 간의 transition은 web에서는 불가능하지만 SPA를 통한 In-page transition은 가능은 하지만 복잡하다.

 

Chrome Canary부터 지원하는 In-page transition api는 각 페이지간의 transition을 도와줌!

 

In-page transition의 목표는 각 페이지 이동은 CSS를 통해 단순하게 설정할수 있으면서도, 동시에 자바스크립트를 통해서 더 복잡한 Transition을 수행할수 있게 해주는 것임

 

 

 

 

이런 페이지 구성이 있다면, 이것은 각각 헤더, 본문, 공유 버튼으로 나눌수 있고 이렇게 나누어져 캡쳐된다.

 

자식 요소들도 독립적인 이미지로 나누어져 자유롭게 조절이 가능함.

 

transition element
├─ image wrapper
│  ├─ image (Page-A)
│  └─ image (Page-B)
└─ …child transition elements…

전체적인 구조는 이런데, (캡쳐된) image A에서 image B를 전부 들고 있기 때문에 A->B의 흐름을 가지고 있을수 있다.

 

.header {
  page-transition-tag: header;
}
.content {
  page-transition-tag: content;
}

document.addEventListener("pagehide", (event) => {
  if (!event.transition) return;
  event.transition.setElement(document.documentElement, "root");
  event.transition.setData({ … });
});

CSS를 통해서나 자바스크립트를 통해서 둘다 조절이 가능한데, 위에서 말했듯 단순한 구현이라면 CSS만으로도 어느정도 그럴듯한 구현이 가능한데, 사실상 자바스크립트가 필요할 것 같다.

 

대표적인 Page Transition인 자식 페이지로의 Slide-in 같은 경우도 현재 유투브 상에서 제시하는 것은 동적으로 클래스를 추가하여 구분하라는 것이었고, 추후에 나올 navigate API를 같이 사용하라는 것인데, 자바스크립트를 써야겠지...

 

 

크롬 카나리의 내용이라 아직까지는 많이 이른 내용이라 세부적인 내용까지는 알아보지 않았는데, 점차 SPA가 진짜 네이티브 어플리케이션처럼 변하고 있다는 것이 느껴진다. 재밌다

 

 

 

내용은 이곳의 내용을 가져왔음!

 

https://github.com/WICG/shared-element-transitions/blob/main/explainer.md

GitHub - WICG/shared-element-transitions