지구상에서 'Type'디스크립터는 view 전환에서 무엇입니까?

Scant 정보를 찾기 위해 새로운 것을 조사한 적이 있습니까? 그것은 미지의 디지털 영토를 탐험하는 데 실망 스럽지만 흥미 진진한 역설입니다. 나는 최근 디스크립터를 문서화하는 동안 이것을 만났다. 당신은 교차 문서보기 전환에 익숙 할 것입니다 : 이전에 JavaScript 프레임 워크 및 애니메이션 라이브러리가 필요한 웹 페이지 간의 CSS 구동 전환. 전환을 시작하는 것은 디스크립터를 두 페이지에서

로 설정하여 부드러운 크로스 페이드 효과를 만듭니다. @view-transition ?> 간단합니까? 는 일반적으로 알려진 설명 자입니다. 그러나 덜 문서화되지 않은 형제 자매가 있습니다 : types 설명자

디스크립터 이해 교차 문서보기 전환은 비교적 새롭기 때문에 포괄적 인 탐사가 진행 중입니다. 놀랍게도, 디스크립터는 종종 간과됩니다. 일부 문서는 전적으로 생략합니다. CSS 사양은이 설명을 제공합니다 navigation auto 디스크립터는 전환을 캡처하거나 수행 할 때 전환의 활성 유형을 설정합니다.

보다 구체적으로,

@view-transition {
  navigation: auto;
}

는 활성 유형이 적용되지 않으면 공간 별 활성 유형 이름 (as 목록을 허용합니다.

이름 : navigation types

for :

types value :

types 초기 :

<:> 예제 사용 : types 그러나"활성 "유형은 무엇입니까? 더 깊이 탐구합시다.

활성 유형 : 재단 전환 도전 :

범용 크로스 페이드 애니메이션은 유용하지만 종종 탐색 컨텍스트를 기반으로 전환 사용자 정의가 필요합니다. 예를 들어, Paginated Content는 오른쪽/왼쪽으로 미끄러질 수 있으며 소셜 미디어 프로필 클릭은 전환 중에 프로필 이미지를 지속 할 수 있습니다. 여러 전환을 정의하면 직접 갈등이 발생합니다. 선택적 전이 활성화가 필요합니다.

솔루션 : types 활성 유형은 어떤 전이를 실행하고 어떤 요소가 참여하는지 결정합니다. CSS에서, <custom-ident></custom-ident> 의사 클래스는 특정 활성 유형을 갖는 요소를 대상으로합니다. 활성 유형으로 를 정의하면 조건이 충족 될 때만 애니메이션이 활성화됩니다.

@view-transition {
  navigation: auto;
}

이것은 상충되는 전환을 방지합니다. 중요하게도, 이것은 로의 에만 영향을 미치며, 페이지에서 전환하지 않고 대상 페이지를 기반으로 사용자 정의 된 전환을 가능하게합니다.

. 디스크립터를 통해 제어되는 및 전환을 보여주는 데모는 를 사용할 수 있습니다. 전체 코드는 github [Link-to-github] JavaScript의 향상된 역할

CSS 단독은 대상 페이지를 기반으로 제어를 전환으로 제한합니다. Pagination 및 소셜 미디어 사례와 같은보다 복잡한 시나리오에는 소스 페이지를 알아야합니다. 활성 유형은 세 가지 방법으로 채워질 수 있습니다 :

bounce를 통해 인수 전환의 slide 속성을 ​​사용하여 동적으로 돌연변이 (위에서 논의한 바와 같이) 디스크립터를 사용하여 선언했습니다 types 옵션 2는 이벤트를 사용하여 주문형 활성 유형 설정이 가능하여 소스 및 대상 페이지를 기반으로 컨텍스트 인식 전환을 가능하게합니다. 이 방법에 대한 추가 탐색이 필요하다 활성 유형으로 깊은 다이빙을하고 전환을 보려면 다음을 참조하십시오. 교차 문서보기 전환 (Bramus)에서 전환 유형보기 JavaScript (Umar Hansa)로보기 전환 방향을 사용자 정의하십시오.

위 내용은 지구상에서 'Type'디스크립터는 view 전환에서 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!