뷰포트 외부의 뷰 전환

CSS 보기 전환이 Chrome에 도입되었으며 현재 대부분의 최종 사용자가 (좋든 나쁘든) 널리 사용할 수 있습니다. Safari도 크게 뒤지지 않습니다. TP에서 이 기능을 사용할 수 있고 Firefox도 최소한 해당 기능을 개발 중입니다.

다중 페이지 전환 구현이 훨씬 단순해진 것을 좋아하지만 동시에 뷰포트 외부에 있는 요소가 격렬하게 이리저리 움직이기 시작한다는 큰 불만을 깨달았습니다.

내 블로그에서는 일부 Javascript를 사용하여 이 문제를 다룹니다. IntersectionObserver는 표시되는 동안 사용자 정의 속성에 view-transition-name을 설정합니다. 눈에 띄지 않는 한 속성은 설정되지 않고 전환이 트리거되지 않습니다. 작동하지만 서로 의존하려면 HTML, Javascript 및 CSS가 필요합니다. 프레젠테이션 문제를 CSS에 유지한다는 정신으로 더 간단한 솔루션을 원합니다.

도움이 될 수 있는 또 다른 기능이 최근 Chrome에 추가되었습니다. 바로 스크롤 기반 애니메이션입니다. 안타깝게도 이 기능은 아직 Chrome에서만 사용할 수 있습니다. Firefox는 플래그 뒤에 그것을 가지고 있고 Safari는 여기에서 활동의 흔적을 보여주지 않습니다. 하지만 이전에 언급한 Javascript 솔루션을 사용하거나 단순히 뷰포트 감지를 무시하고 어쨌든 애니메이션을 표시하는 등의 방법으로 우아하게 돌아갈 수 있습니다(이 글을 쓰는 당시에는 Safari의 경우였습니다).

간단한 전환

보기 전환 자체부터 시작하여 모든 것을 종합해 보겠습니다.

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

<!-- on page1.html: -->
<div data-view-transition>Whoosh!</div>

<!-- on page2.html: -->
<div data-view-transition>Whoosh!</div>

이제 탐색 시 page1.html의 div가 page2.html의 버전으로 변환되는 것을 볼 수 있습니다. CSS의 @view-transition at-rule은 전체 문서에서도 크로스페이드를 시작합니다. 전환 기간은 기본적으로 0.4초로 설정되어 있지만 이를 제어하기 위해 몇 줄을 추가할 수 있습니다.

@property --view-transition-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.4s;
}

::view-transition-group(*) {
    animation-duration: var(--view-transition-duration);
}

기간은 --view-transition-duration에 의해 설정됩니다. 상단의 @property 규칙은 전적으로 선택 사항이지만 --view-를 설정할 때 애니메이션 기간이 잘못된 값 대신 0.4초로 되돌아갈 수 있습니다. 전환 기간: 가짜.

뷰포트 다루기

그래도 페이지 전환 시 요소가 뷰포트 외부에 있을 때 요소는 계속 애니메이션을 적용하고 때로는 어디서 왔는지, 어디로 가는지 표시하지 않고 전체 표시 화면 안이나 위로 지나가기도 합니다. 저는 그런 행동이 매우 짜증난다고 생각합니다.

스크롤 기반 애니메이션을 사용하면 이제 스크롤 및 뷰포트 기준 위치를 기반으로 스타일을 제어할 수 있는 도구가 있습니다. 따라서 보기 전환 트리거를 제어할 수도 있습니다.

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    [data-view-transition] {
        view-transition-name: var(--view-transition-name, default-view-transition);
    }
}

enable-vt 키프레임 애니메이션은 없음에서 텍스트 문자열이 있는 사용자 정의 속성으로 원활하게 전환할 수 없으므로 하드 컷을 수행합니다. 애니메이션 범위는 요소가 뷰포트에 부분적으로 들어오거나 나갈 때 트리거됩니다. 애니메이션 자체는 --enable-view-transition을 0.1% 및 99.9%로 설정하여 최대한 신속하게 트리거합니다. 애니메이션이 시작되거나 끝나는 위치에 대한 힌트를 얻을 수 있는 즉시 뷰 전환을 활성화하고 싶습니다.

마지막으로 --enable-view-transitions는 스크롤 구동 애니메이션에 의해 없음으로 설정되거나 --view-transition-name이라는 새로운 사용자 정의 속성으로 설정됩니다. 화면 적용 범위의 0.1%에서 99.9% 사이로 설정되어 뷰포트 위와 아래 모두(또는 왼쪽과 오른쪽, 원하는 방식으로) 뷰 전환을 비활성화합니다. 이 새로운 속성은 다양한 요소에 개별 애니메이션을 설정하는 데 유용합니다. --view-transition-name에 고유한 값을 설정하여 각 요소마다 고유한 전환을 얻을 수 있습니다.

<div 데이터-보기-전환>



<p>이 작업은 소스 페이지와 타겟 페이지 모두에서 수행되어야 합니다. 값을 설정하지 않으면 기본값은 나머지 모든 데이터 보기 전환 요소를 균일하게 제어하는 ​​default-view-transition입니다.</p>

<h2>
  
  
  실제 구현
</h2>

<p>저는 이 구현을 저의 작은 CSS 보일러플레이트인 Ssstyles에 추가했습니다. 소스 페이지와 대상 페이지에서 요소에 data-view-transition 속성을 부여하면 둘 사이를 전환할 수 있습니다. --view-transition-name을 지정하면 다른 유사한 요소와 별개로 고유한 애니메이션을 갖게 됩니다. --view-transition-duration을 설정하면 전환 기간이 제어됩니다.</p>


          

            
        

위 내용은 뷰포트 외부의 뷰 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!