전환보기 API는 웹 페이지 요소간에 애니메이션을 달성 할 수있는 더 쉬운 방법을 제공하므로 페이지로드 사이에서도 원활한 전환이 가능합니다. 호환성이 우수한 진보적 인 향상 기술입니다.
전통적인 CSS 전환 및 애니메이션은 웹 효과에서 놀라운 성과를 달성했지만 모든 애니메이션을 구현하기 쉽지는 않습니다. 예를 들어, 10 개의 이미지와 제목 목록의 크로스 페이드 애니메이션에는 다음 단계가 필요합니다.
오래된 DOM 요소를 유지하십시오
새 dom 요소를 만들어 페이지의 적절한 위치에 추가하십시오
새로운 요소로 페이딩하는 동안 오래된 요소를 조성합니다
(선택 사항) 이전 요소를 새 DOM 요소로 바꾸십시오.
뷰 전환 API는이 과정을 단순화합니다
API는 현재 페이지 상태의 스냅 샷을 캡처합니다
DOM을 업데이트하고 필요한 요소를 추가하거나 삭제하십시오
API는 새 페이지 상태의 스냅 샷을 캡처합니다
API는 기본 페이드 효과 또는 사용자 정의 CSS 애니메이션을 사용하여 두 상태 간의 전환을 애니메이션합니다.
우리는 추가 복잡한 단계없이 DOM을 업데이트하면됩니다. 몇 줄의 코드 만 있으면 View Transitions API를 지원하는 브라우저에서 아름답게 슬라이드와 같은 애니메이션을 달성 할 수 있습니다.
현재 API는 실험 단계에 있지만 최신 크롬 기반 브라우저는 이미 단일 페이지 DOM 애니메이션 효과를 지원합니다. Chrome 115 이상은 일반적인 WordPress 사이트와 같은 페이지로드 간의 애니메이션도 지원합니다. 이로 인해 JavaScript 코드없이 더 쉽게 사용됩니다.
Mozilla와 Apple은 Firefox와 Safari에서 API를 구현하려는 계획을 발표하지 않았다는 점에 유의해야합니다. View Transitions API를 지원하지 않는 브라우저는 여전히 제대로 작동하므로 지금이 효과를 추가하는 것이 안전합니다.
신규 기술과 오래된 기술의 비교
선임 개발자는 친숙하다고 느낄 수 있습니다. 1997 년에 출시 된 Internet Explorer 4.0은 요소 및 전체 페이지 전환 기능을 도입했으며 2000 년에 출시 된 IE5.5로 업데이트되었습니다. 우리는 태그를 사용하여 PowerPoint 스타일의 다양한 전환 효과를 추가 할 수 있습니다.
그러나이 기술은 웹 표준이 아니기 때문에 널리 채택되지 않았습니다.
페이지 내에서 전환 효과를 만듭니다
다음 예제는 Chrome에서 View Transitions API를 사용하여 간단한 페이드 효과를 만드는 방법을 보여줍니다.
(CodePen 예제 1의 링크 및 스크린 샷은 여기에 포함되어야합니다)
html 코드에는 두 개의
요소가 포함되어 있으며 다른 컨텐츠 블록을 표시하는 데 사용됩니다.
(HTML 코드 스 니펫은 여기에 포함되어야합니다)
함수는 속성을 추가하거나 제거하여 각 돔 업데이트를 보여 주거나 숨겨지는 모든 DOM 업데이트를 처리합니다. 페이지가로드되면 페이지 URL의 switchArticle() 또는 첫 번째 hidden 요소를 기준으로 활성 <article></article> 요소를 결정합니다.
(JavaScript 코드 스 니펫은 여기에 포함시켜야합니다) location.hash
이벤트 핸들러 함수는 사용자가 <article></article>를 클릭하면 <article></article>를 클릭하면 모든 페이지 클릭을 모니터링하고 호출합니다.
(JavaScript 코드 스 니펫은 여기에 포함시켜야합니다)
기능을 로 콜백으로 전달하면 뷰 전환 API를 사용할 수 있습니다.
(JavaScript 코드 스 니펫은 여기에 포함시켜야합니다)
는 초기 상태의 스냅 샷을 캡처하고, 실행하고, 새로운 상태의 스냅 샷을 캡처하고, 둘 사이에 기본 반 초의 페이드 효과를 만듭니다.
위 내용은 View 전환 API 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
전환보기 API : 웹 애니메이션을 단순화하는 혁신적인 기술 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
