발가락은보기 전환으로 담그다

솔직히, View Transition API는 나에게 약간 어려운 일입니다. 많은 튜토리얼은 우리가 두 페이지 사이의 전환을 애니메이션하는 방법에 대한 인상적인 시연을 보여줍니다. 일반적으로 가장 간단한 예로 시작합니다.

그러나 이것은 일반적으로 간단한 부분의 끝이며, 튜토리얼은 JavaScript 영역을 파헤칩니다. 물론, 이것은 잘못된 것이지만, 단계별로 배우는 나와 같은 사람에게는 큰 도약입니다. 그래서 저는 Dave와 Jim Neilsen 삼촌이 매우 실용적인 전환 기술 (제목)에 대해 공유하는 것을 보았을 때 영감을 받았습니다.

Jim의 웹 사이트에서 어떻게 작동하는지 볼 수 있습니다. 이것은 내가 새로운 것을 시도하는 것을 좋아하는 완벽한 "스낵"실험입니다. 그것은 두 페이지를 View Transitions API : 현재 페이지와 탐색하려는 페이지에 결합하는 데 사용되는 동일한 코드 스 니펫으로 시작합니다. 여기에서 우리는 그것들을 각각 "새로운"및 "오래된"페이지로 생각할 수 있습니다.

나는 또한 내 개인 블로그에서 동일한 효과를 달성했습니다 : 이것은 블로그에 완벽한 운동입니다. 먼저 변환에 참여하려는 요소에 대해 를 설정합니다.이 경우 "Old"페이지의 기사 제목과 "새"페이지의 기사 제목을 설정합니다.

@view-transition {
  navigation: auto;
}

태그가 다음과 같습니다

를 줄 수 있습니다 :

Dave는 운동을 줄이는 것을 선호하는 사용자를 존중하고 시스템 환경이 연습을 허용하는 경우에만 적용된다고 신속하게 지적했습니다.

페이지 에이 두 요소 만 있으면 제대로 작동합니다. 그러나 우리는 기사 링크 목록을 가지고 있으며, 모두 고유 한

가 있어야합니다. 새로운 블로그 게시물을 게시 할 때 Jim이 그의 작업에 어려움을 겪고있는 곳입니다. 새 콘텐츠를 게시하려면 CSS를 편집하고 새로운 전환 이름을 제시해야합니까? 아니요, 더 나은 방법이 있어야합니다. @view-transition

그렇습니다. 또는 적어도 미래에. 아직 표준이 아닙니다. 실제로 Bramus는 최근 에이 글을 썼으며 기능에 대한 Chrome의 작업을 논의하면서 선언에서 일련의 고유 식별자를 생성 할 수 있습니다. 이 미래의 CSS를보십시오 :

대단해! 나는 지금 그것을 사용하고 싶다! Chrome이 그것을 개발하기를 기다려야 할뿐만 아니라 다른 브라우저를 채택하고 구현하기를 기다려야하는 것은 유감이므로 실제로 우리가 실제로 그것을 얻을 수있는시기를 알 수 있습니다. 현재 가장 좋은 방법은 템플릿에서 직접 프로그래밍 논리를 사용하는 것입니다. 내 웹 사이트는 WordPress에서 실행되므로 PHP에 액세스하고 두 요소 모두에서 view-transition-name를 설정하는 인라인 스타일을 생성 할 수 있습니다.

기사 제목은 내 개별 블로그 게시물의 템플릿에 있습니다. WordPress 전문 용어에서는 이것이

파일입니다. single.php

기사 링크는 기사 아카이브의 템플릿에 있습니다. WordPress에서 이것은 일반적으로

@view-transition {
  navigation: auto;
}

: 입니다

거기서 무슨 일이 있었는지 보시겠습니까? archive.php 속성은 PHP를 사용하여 WordPress의 기사의 할당 된 ID를 기반으로 이름을 생성하여 두 개의 변환 요소에 직접 설정됩니다. 또 다른 방법은 템플릿에

태그를 추가하고 논리를 거기에 넣는 것입니다. 두 방법 모두 미래에 달성 할 수있는 것과 비교하여 똑같이 서투르므로 원하는 것을 선택하십시오.

<h1>Notes</h1>
<a href="https://www.php.cn/link/ddabb258dc2a7d5b5a7204fa68fe522f"></a>

중요하게도, 이제이 두 요소는 동일 한

를 공유하고 우리는 에 합류했습니다. 이 두 요소를 사용하면 변환이 작동 할 수 있습니다! 기본 변환이 모든 무거운 리프팅을 수행하기 때문에 view-transition-name (그러나 가능)를 정의 할 필요조차 없습니다. <style></style> 같은"약간의 맛 "정신으로, 나는 Modern Web Weekly의 최신호를 보았고, 라디오 버튼 에서이 작은보기 전환을 사용하고 싶습니다 : attr(). 입력 전에 전환이 실행되도록 라디오 버튼의 기본 클릭 동작을 차단하려면 JavaScript가 필요합니다.

위 내용은 발가락은보기 전환으로 담그다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!