뷰 전환은 애니메이션으로 다양한 상태 간에 매끄럽게 전환됩니다. 웹 페이지 또는 애플리케이션의 UI입니다. 이 View Transition API 이 원칙은 일반 텍스트보다 더 간단하고 효율적으로 이러한 효과를 만들 수 있습니다. 이전에는 가능했던 적이 있습니다. 이 API는 이전 버전에 비해 여러 가지 이점을 제공합니다. 다음을 포함한 JavaScript 접근 방식:
- 사용자 환경 개선: 부드러운 전환과 시각적 신호로 사용자를 안내합니다. 탐색이 자연스럽고 덜 거슬리게 느껴질 수 있습니다.
- 시각적 연속성: 보기 간에 연속성 유지 인지 부하를 줄이고 사용자가 애플리케이션 내에서 방향을 유지하는 데 도움이 됩니다.
- 성능: API는 최대한 적은 수의 기본 스레드 리소스를 부드러운 애니메이션을 만들 수 있습니다.
- 현대적인 디자인: 전환이 개선되어 세련되고 완성도가 높은 몰입도 높은 사용자 경험을 제공합니다.
브라우저 지원
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
이 게시물 시리즈의 일부인 전자상거래 기업들이 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선했습니다. 이 도움말에서는 일부 기업에서 View Transition API를 구현하고 이로부터 혜택을 얻은 방법.
redBus
redBus는 항상 네이티브와 웹 환경 간에 최대한의 패리티를 최대한의 노력을 기울입니다. View Transition API 이전에 이러한 API를 구현하려면 웹 애셋의 애니메이션은 어려웠습니다. 하지만 API를 사용하면 직관적으로 다양한 사용자 여정에서 전환을 생성함으로써 더욱 생생하게 경험하세요 이 모든 것이 성능 이점과 결합되어 이어야 합니다.—아밋 쿠마르, 선임 엔지니어링 RedBus의 관리자.
팀은 여러 위치에서 뷰 전환을 구현했습니다. 예를 들면 다음과 같습니다. 홈의 로그인 아이콘에 표시되는 페이드인 및 슬라이드 인 애니메이션 조합 있습니다.
<ph type="x-smartling-placeholder">코드
이 구현에서는 여러view-transition-name
맞춤 애니메이션을 사용합니다.
(scale-down
및 scale-up
). 고유한 값으로 view-transition-name
사용
로그인 구성요소를 페이지의 나머지 부분에서 분리하여 애니메이션을 적용합니다.
별도로 관리할 수 있습니다 새로운 고유 view-transition-name
를 만들면 새
::view-transition-group
를 생성할 때
이를 통해 기본값과는 별도로 조작할 수
::view-transition-group(root)
입니다.
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
Tokopedia
팀은 뷰 전환을 사용하여 사용자가 전환할 때 페이딩 애니메이션을 추가했습니다. 표시됩니다.
startViewTransition
를 사용하여 즉시 구현할 수 있으므로 이전 구현에 비해 더 매끄러운 페이딩 전환을 얻을 수 있습니다. 아무 효과도 없이 말이죠—앤디 위할림, 선임 소프트웨어 Tokopedia 엔지니어
이전
이후
코드
다음 코드는 React 프레임워크를 사용하며 프레임워크별 코드를 포함합니다.
예를 들어 flushSync.
프레임워크를 이용한 뷰 구현에 대해 자세히 알아보세요.
전환으로 이동합니다.
이는 브라우저에서 지원 여부를 확인하는 기본 구현입니다.
startViewTransition
이면 전환을 실행합니다. 그렇지 않으면
기본 동작입니다.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
정책바자
Policybazaar 투자 금액 카테고리는 '구매해야 하는 이유', 시각적으로 매력적으로 만들고 이러한 기능의 사용을 개선합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">뷰 전환을 통합하여 반복적 CSS와 JavaScript를 제거했습니다. 다양한 상태에 걸쳐 애니메이션을 관리하는 코드입니다. 절감 사용자 경험을 크게 개선했습니다.—아만 소니, Policybazaar 기술 책임자.
코드
다음 코드는 이전 예와 유사합니다. 한 가지 주의할 점은
기본 스타일과 애니메이션을 재정의하여
::view-transition-old(root)
및::view-transition-new(root)
. 이 경우
기본 animation-duration
가 0.4초로 업데이트되었습니다.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
View Transition API를 사용할 때 고려할 사항
동일한 페이지에서 여러 개의 보기 전환 효과를 사용할 때는 각 효과나 섹션에 대해 서로 다른 뷰 전환 이름을 사용하면 충돌합니다.
보기 전환이 활성 (전환 중)인 동안에는 다음에 새 레이어를 추가합니다.
표시됩니다. 따라서 마우스 오버 시 전환을 트리거하지 마세요.
mouseLeave
이벤트가 예기치 않게 트리거됩니다 (실제 커서가
움직임이 없음).
리소스
- View Transition API를 사용한 원활하고 간단한 전환
- 설명자: MPA의 전환 보기
- 우수사례: 뷰 전환을 통한 원활한 탐색
- 우수사례: 웹으로 무엇을 할 수 있을까요? | 앱과 유사한 탐색 기능 제공
- 상호 운용성 제안서: 여러 브라우저에서 보기 전환 사용 가능
- 버그를 신고하거나 새 기능을 요청하시겠어요? 여러분의 의견을 들려주세요 SPA 및 MPA
이 시리즈의 다른 기사에서 전자상거래가 어떻게
기업들은 스크롤 기반 전략과 같은 새로운 CSS 및 UI 기능을 사용하여
애니메이션, 팝오버, 컨테이너 쿼리, has()
선택기 등이 포함됩니다.