astro vtbot
1.0.0
아니, 로봇이 아니야 ? B ag o f t ricks!
이 작품 바늘을 지원하기 위해 별을 제출하십시오
트릭 백은 Astro의보기 전환에 대한 확장 및 지원을 제공합니다.
기술 데모의 현재 배포 및 문서는 https://events-3bg.pages.dev/에서 찾을 수 있습니다.
@vtbag/element-crossing의 최신 버전을 제공하며, data-* 속성을 새 페이지로 넘어 설 수 있도록 버그 수정을 제공합니다!
자세한 내용은 ElementCrossing의 변화를 참조하십시오.
검사실 데트 툴은 이제 ALS가
pnpm프로젝트를 위해 일합니다!
큰 소리를 지르고 "감사합니다!" 이 수정을 제공 한 Lukas에게!
브라우저 네이티브 크로스 문서보기보기 전환의 새로운 구성 요소 전환 :
<CamShaft>구성 요소는 다른 수직 스크롤 위치로 탐색 할 때 뷰포트의 높이를 초과하는 뷰 전이 그룹으로 인한 의사 매도 스크롤 효과를 방지합니다.
<TurnSignal>은 Astro의 전환/후진 애니메이션을 활성화 할 수 있습니다transition:animate애국자 크로스-문서@view-transition{}사용하는 애니메이션을 사용할 수 있습니다. 선택적으로 사이트 페이지의 총 순서로 구성 요소를 구성하여 전환 방향을 자동으로 감지 할 수 있습니다.
<ElementCrossing />CSS 전용 교차 문서보기 전환을 실험하고 탐색 전반에 걸쳐 HTML 요소의 상태를 보존하는 방법을 놓치는 사람들을위한 구성 요소입니다. 선택한 요소 상태를 다른쪽으로 전송하십시오!
검사 챔버 : 이전과는 다른 뷰 전환을 참조하십시오. 모든 세부 사항을 검사하고, 공개, 디버그하고, 최적화하십시오! 이제 View Transition API에 의해 도입 된 각 유사 요소의 효과로 드릴링하고 개별 애니메이션을 선택적으로 전환하여 무슨 일이 일어나고 있는지 더 잘 이해하십시오! 검사실을 구성 요소 (<estectionchamber />)로 소환하거나 가방을 통합으로 설치하십시오! DevToolbar 에서 챔버에 접근하십시오!
Starlight Support : View Transitions가 활성화 된 Starlight 사이트의 모습을보고 싶었던 적이 있습니까? 다음 단계에 따라 전체 페이지로드를 제거하고 스타 라이트 사이트를 스파처럼 보이게하십시오!
astro-vtbot 패키지는 모 놀리 식 라이브러리가 아닙니다. 필요한 구성 요소를 사용하고 대역폭 만 지불하십시오.
| 요소 | Brotli 바이트가 추가되었습니다 |
|---|---|
| 애니메이션 스타일 | ~ 0.1k |
| autonameselected? | ~ 0.3k |
| BorderControl? | ~ 0.1k |
| 브레이크 패드? | ~ 0.2k |
| 캠 샤프트? | ~ 0.6k |
| 요소 교환? | ~ 1.2k |
| 검사 검사? | ~ 27k |
| 린터? | ~ 1.9k |
| 로드 인디케이터 ator | ~ 0.4K |
| 이동하다 ? | ~ 0.2k |
| 노스 크롤 | ~ 0.1k |
| PageOffset? ⇞ | ~ 0.1k |
| pointeronnavigation? | ~ 0.1k |
| 포털? | ~ 0.2k |
| 교체 스웨이 ↹ | ~ 0.5k |
| 스타 라이트…? | ~ 3.0k |
| 스왑? | -0.3K |
| 스윙? | ~ 0.1k |
| Turnsignal? | ~ 0.5k |
| vtbotdebug? | ~ 2.8k |
| 줌? | ~ 0.1k |
자세한 정보는 재사용 가능한 구성 요소의 문서를 방문하십시오.
<Linter/> : 전환을 설정할 때 문제를 식별하는 데 도움이되는 Linter 구성 요소.
<VtBotDebug/> : 이벤트와 데이터가 발생할 때 로그인하는 디버깅 구성 요소.
<ReplacementSwap/> : Iframes 또는 CSS 애니메이션의 재 구선을 피하기 위해 원래 DOM의 요소를 보존하는 ANTERANTIVE DOM SWAP ().
<LoadIndicator> : 앱이 클릭을 발견했는지 여부에 대한 전환이있는 사이트에 대한 시각적 피드백을 놓친 적이 있습니까? 로딩 표시기가 필요합니다! 당신은 간다!
Zoom , <Move> 및 Swing Animations 및 <AnimationsStyle/> 구성 요소는 확장 스타일 옵션을 허용합니다.
<Portal/> 모든 뷰가 포털/로딩 페이지를 통해 전환을 강요하는 구성 요소.
<NoScroll/> 다음 페이지로 전환 할 때 현재 수직 및 수평 스크롤 위치를 유지하십시오.
트릭 백에는 현재보기 전환 이벤트를 사용하여 다양한 효과의 구현의 예를 보여주는 몇 가지 기술 데모가 포함되어 있습니다.
소스는이 저장소에 있습니다.
마지막으로, 배포에는 전환 이벤트에 대한 풍부한 정보와 배경 정보와 Astro의 View 전환에 대한 귀중한 팁 및 트릭이 포함 된 ▶ Jotter ◀도 포함됩니다.
일부 내용은 기술 데모, 일부는 유용한 도구이며 일부는 자신의 프로젝트에서 사용할 수있는 재사용 가능한 구성 요소입니다.
도움을 받으려면 Github Repo의 Discussions 탭을 확인하십시오.
이 패키지는 Astro와 독립적으로 Martrapp에 의해 유지됩니다. 문제를 제출하거나 PR을 열어 기부 할 수 있습니다!
이 패키지의 변경 이력은 changelog.md를 참조하십시오.
