Unduh astro vtbot - Unduh Kode Sumber astro vtbot

astro vtbot

Komponen pihak ketiga

1.0.0

Unduh

Tidak, ini bukan robot ?, Ini? B Ag O F T Ricks!

️TLEASE STAR untuk mendukung karya ini️

Tas trik untuk transisi pandangan Astro

The Bag of Tricks menyediakan ekstensi & dukungan di sekitar transisi tampilan Astro.

Penyebaran demo teknologi saat ini dan dokumentasi dapat ditemukan di https://events-3bg.pages.dev/

!!! Trik baru di dalam tas? !!!

Membawa Anda versi terbaru dari @vtbag/elemen-crossing, dengan perbaikan bug untuk membiarkan data-* properti menyeberang ke halaman baru!

Untuk detailnya, lihat Changelog dari ElementCrossing.

Trik yang baru -baru ini dipelajari

Kamar Inspeksi Devtools sekarang bekerja untuk proyek pnpm !
Teriakan besar dan "Terima kasih!" ke Lukas karena menyediakan perbaikan ini!

Komponen baru untuk transisi tampilan lintas dokumen browser-asli: Komponen <CamShaft> mencegah efek pseudo-smooth-scroll yang disebabkan oleh kelompok transisi tampilan yang melebihi ketinggian viewport ketika menavigasi ke posisi gulir vertikal yang berbeda.

The <TurnSignal> memungkinkan animasi maju/mundur Astro yang disediakan oleh transition:animate untuk bekerja dengan cross-document asli @view-transition{} . Secara opsional Anda dapat mengonfigurasi komponen dengan urutan total halaman situs Anda, memungkinkannya untuk secara otomatis mendeteksi arah transisi.

<ElementCrossing /> adalah komponen bagi Anda yang bereksperimen dengan transisi tampilan lintas dokumen khusus CSS dan kehilangan cara untuk melestarikan keadaan elemen HTML di seluruh navigasi: Transfer status elemen yang dipilih ke sisi lain!

Ruang Inspeksi: Lihat Transisi Tampilan Anda Tidak seperti sebelumnya: Periksa setiap detail, mengungkapkan, debug, dan optimalkan! Sekarang, telusuri efek dari setiap elemen semu yang diperkenalkan oleh API transisi tampilan dan bahkan secara selektif beralih animasi individu untuk lebih memahami apa yang terjadi! Panggil ruang inspeksi sebagai komponen (<InspectionChamber />) atau pasang tas sebagai integrasi! dan mengakses kamar dari devtoolbar !

Dukungan Starlight: Pernah ingin melihat seperti apa situs Starlight Anda dengan tampilan transisi yang diaktifkan? Ikuti langkah -langkah ini untuk menghilangkan beban halaman penuh dan membuat situs Starlight Anda terlihat seperti spa!

Komponen yang dapat digunakan kembali?

Membutuhkan ekstensi untuk tampilan transisi karena Anda memiliki masalah dengan iframes di halaman Anda?
Ingin dukungan dalam pemahaman dan debugging transisi tampilan atau hanya menginginkan sepasang mata kedua? Pada pengaturan transisi tampilan Anda?
Mencari animasi yang dapat digunakan kembali atau efek transisi khusus?
Ingin menggunakan transisi tampilan di situs Starlight Anda?

Paket astro-vtbot bukanlah perpustakaan monolitik. Gunakan komponen yang Anda butuhkan dan hanya membayar bandwidth untuk itu.

Komponen	Byte brotli ditambahkan
Gaya animasi	~ 0,1k
Autonames Dipilih?	~ 0,3k
BorderControl?	~ 0,1k
Brakepad?	~ 0,2k
Camshaft?	~ 0,6k
Elementcrossing?	~ 1.2k
InspectionChamber?	~ 27k
Linter?	~ 1.9k
LoadingIndicator ⏳	~ 0,4k
Bergerak ?	~ 0,2k
Noscroll	~ 0,1k
PageOffset? ⇞	~ 0,1k
Pointeronnavigasi?	~ 0,1k
Portal?	~ 0,2k
Penggantian ↹	~ 0,5k
Starlight…?	~ 3.0k
Swapsound?	-0.3k
Mengayun ?	~ 0,1k
Turnignal?	~ 0,5k
Vtbotdebug?	~ 2.8k
Zoom?	~ 0,1k

Kunjungi dokumentasi komponen yang dapat digunakan kembali untuk informasi terperinci.

<Linter/> : Komponen linter yang membantu Anda mengidentifikasi masalah saat menyiapkan transisi.
<VtBotDebug/> : komponen debugging yang mencatat peristiwa dan data mereka saat terjadi.
<ReplacementSwap/> : DOM swap () alterantive, yang menjaga elemen dalam DOM asli untuk menghindari reinitialisasi iframe atau animasi CSS.
<LoadIndicator> : Pernahkah Anda melewatkan umpan balik visual di situs dengan tampilan transisi, apakah aplikasi tersebut telah memperhatikan klik? Anda memerlukan indikator pemuatan! Ini dia!
Zoom , <Move> dan Swing animasi dan komponen <AnimationsStyle/> memungkinkan untuk opsi gaya yang diperluas.
<Portal/> komponen yang memaksa semua melihat transisi melalui halaman portal/pemuatan.
<NoScroll/> Pertahankan posisi gulir vertikal dan horizontal saat ini saat bertransisi ke halaman berikutnya.

Demo teknologi

Kantong trik saat ini berisi beberapa demo teknis yang menunjukkan contoh implementasi berbagai efek menggunakan acara transisi tampilan.

Sumber berada di repositori ini.

The Thotter?

Last but not least, penyebaran juga mencakup ▶ berkumpul ◀ dengan banyak informasi tentang acara transisi serta informasi latar belakang dan tips & trik yang berharga pada transisi tampilan di Astro.

Beberapa konten adalah demo teknis, beberapa adalah alat yang berguna, dan beberapa adalah komponen yang dapat digunakan kembali yang dapat Anda gunakan dalam proyek Anda sendiri untuk menangani kasus tepi yang melampaui fitur standar Astro.