Astro에서 전환을 봅니다

Astro에서 변환보기 : 부드러운 페이지 전환을위한 강력한 도구 이 기사는 Sitepoint Premium의 저서 "Astro의 힘을 끄는"책에서 발췌 한 것입니다.

View Transformation API는 단일 작업에서 DOM 컨텐츠를 동시에 업데이트하고 개별 DOM 상태간에 애니메이션 변환 효과를 생성하는 편리한 방법을 제공합니다. 과거에 웹에서 이것을 구현하는 것은 매우 어려웠지만이 새로운 API를 사용하면 변환이 상당히 쉬워졌습니다. 연구에 따르면 View Conversion API를 사용하면 웹 사이트의 인식 된 성능 속도가 빨라질 수 있습니다.

Astro는 기본적으로 View 변환을 지원하며 현재이 API를 지원하지 않는 브라우저를 지원하는 내장 폴백 메커니즘이 있습니다. 이 기본 솔루션은 내장 애니메이션, 전면 및 후면 내비게이션 애니메이션, 자동 접근성 지원 () 및 기타 여러 기능을 지원합니다.

전환을 시청하는 가장 좋은 방법 중 하나는 페이지 변환 사이에 상태를 유지하는 비디오 요소를 사용하는 것입니다. (

지시문을 사용하여 구성 요소간에 상태를 유지할 수도 있습니다.) 아래 비디오는 예를 보여줍니다.

우리는 다음을 포함하는

구성 요소가 있다고 가정합니다. prefers-reduced-motion 위 코드에서는 Cloudinary에서 비디오를 얻습니다. 또한 재생 후 비디오가 자동으로 재생 및 루프를하고 사용자에게 제어 버튼을 제공 할 수 있습니다. 이러한 설정은이 비디오 구성 요소로 전송 된 속성에 의해 결정되며 이러한 속성이 제공되지 않으면 기본값이 사용됩니다. 그런 다음 이러한 변수는 html

요소에 추가됩니다.

client:* 명령에 유의하십시오. 이 명령을 사용하면 비디오 플레이어를 전환간에 유지합니다. 다음 페이지로 탐색 할 때 비디오는 계속 재생되며 나머지 페이지에는 업데이트 된 컨텐츠가 표시됩니다. 이 구성 요소를

및 페이지에서 사용할 수 있습니다.

마지막으로, 우리는 페이지 변환을 활성화해야하며, 전체 프로젝트에 대해 각 페이지 또는 전 세계에 활성화 할 수 있습니다. 우리가 일종의 레이아웃 파일이 있다고 가정하면 요약하면, 실험적보기 변환 API는 CSS 의사 요소, JavaScript 및 전면 및 후면 DOM 상태의 스냅 샷을 통해 다른 페이지 나 요소 간의 시각적 변환을 단순화합니다. 페이지 인식 성능을 향상시키고 복잡한 사용자 정의 JavaScript 및 CSS에 대한 종속성을 최소화 할 수있는 새로운 기회를 제공합니다.

위 내용은 Astro에서 전환을 봅니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!