astro vtbot
1.0.0
ไม่มัน ไม่ใช่ หุ่นยนต์ใช่ไหม? B AG O F T RICKS!
️ได้โปรดสนับสนุนงานนี้
Bag of Tricks ให้ส่วนขยายและการสนับสนุนรอบ ๆ การเปลี่ยนมุมมองของ Astro
การปรับใช้การสาธิตเทคโนโลยีในปัจจุบันและเอกสารสามารถดูได้ที่ https://events-3bg.pages.dev/
นำเสนอเวอร์ชันล่าสุดของ @VTBAG/Element-Crossing พร้อมการแก้ไขข้อผิดพลาดสำหรับการให้ data-* คุณสมบัติข้ามไปยังหน้าใหม่!
สำหรับรายละเอียดดูการเปลี่ยนแปลงของ Elementcrossing
ห้องตรวจสอบ Devtools ตอนนี้ทำงานสำหรับโครงการ
pnpm!
ตะโกนออกมาและ "ขอบคุณ!" ถึง Lukas สำหรับการแก้ไขนี้!
ส่วนประกอบใหม่สำหรับการเปลี่ยนมุมมองข้ามเอกสารของเบราว์เซอร์-พื้นเมือง: ส่วนประกอบ
<CamShaft>ช่วยป้องกันเอฟเฟกต์ pseudo-smool-scroll ที่เกิดจากกลุ่มการเปลี่ยนมุมมองที่เกินความสูงของวิวพอร์ตเมื่อนำทางไปยังตำแหน่งการเลื่อนแนวตั้งที่แตกต่างกัน
<TurnSignal>ช่วยให้แอนิเมชั่นไปข้างหน้า/ย้อนกลับของ Astro ได้รับจากtransition:animateเพื่อทำงานร่วมกับ cross-document@view-transition{}ทางเลือกคุณสามารถกำหนดค่าส่วนประกอบด้วยลำดับทั้งหมดของหน้าเว็บไซต์ของคุณทำให้สามารถตรวจจับทิศทางการเปลี่ยนแปลงโดยอัตโนมัติ
<ElementCrossing />เป็นองค์ประกอบสำหรับผู้ที่ทดลองกับการเปลี่ยนมุมมองข้ามเอกสาร CSS เท่านั้นและพลาดวิธีการรักษาสถานะขององค์ประกอบ HTML ในการนำทาง: ถ่ายโอนสถานะองค์ประกอบที่เลือกไปอีกด้านหนึ่ง!
ห้องตรวจสอบ: ดูการเปลี่ยนมุมมองของคุณอย่างที่ไม่เคยมีมาก่อน: ตรวจสอบทุกรายละเอียดเปิดเผยการดีบักและเพิ่มประสิทธิภาพ! ตอนนี้เจาะลึกลงไปในเอฟเฟกต์ของแต่ละองค์ประกอบหลอกที่แนะนำโดย View Transition API และแม้กระทั่งการสลับภาพเคลื่อนไหวแต่ละภาพเพื่อให้เข้าใจสิ่งที่เกิดขึ้นได้ดีขึ้น! เรียกห้องตรวจสอบเป็นส่วนประกอบ (<MincectionChamber />) หรือติดตั้งกระเป๋าเป็นการรวม! และเข้าถึงห้องจาก Devtoolbar !
การสนับสนุน Starlight: เคยต้องการดูว่าไซต์ Starlight ของคุณเป็นอย่างไรเมื่อเปิดใช้งานการเปลี่ยนมุมมองหรือไม่? ทำตามขั้นตอนเหล่านี้เพื่อกำจัดโหลดเต็มหน้าและทำให้ไซต์ Starlight ของคุณดูเหมือนสปา!
แพ็คเกจ astro-vtbot ไม่ใช่ห้องสมุดเสาหิน ใช้ส่วนประกอบที่คุณต้องการและจ่ายแบนด์วิดท์สำหรับสิ่งเหล่านั้นเท่านั้น
| ส่วนประกอบ | เพิ่ม Brotli Bytes |
|---|---|
| รูปแบบการเคลื่อนไหว | ~ 0.1K |
| Autonameselected? | ~ 0.3K |
| BorderControl? | ~ 0.1K |
| Brakepad? | ~ 0.2K |
| เพลาลูกเบี้ยว? | ~ 0.6K |
| Elementcrossing? | ~ 1.2k |
| ตรวจสอบ Chamber? | ~ 27k |
| linter? | ~ 1.9k |
| loadingIndicator ⏳ | ~ 0.4K |
| เคลื่อนไหว ? | ~ 0.2K |
| คนโง่ | ~ 0.1K |
| pageoffset? ⇞ | ~ 0.1K |
| Pointeronnavigation? | ~ 0.1K |
| พอร์ทัล? | ~ 0.2K |
| ทดแทน swap ↹ | ~ 0.5K |
| Starlight …? | ~ 3.0k |
| swapsound? | -0.3K |
| สวิง? | ~ 0.1K |
| Turnsignal? | ~ 0.5K |
| vtbotdebug? | ~ 2.8k |
| ซูม? | ~ 0.1K |
เยี่ยมชมเอกสารของส่วนประกอบที่ใช้ซ้ำได้สำหรับข้อมูลโดยละเอียด
<Linter/> : ส่วนประกอบ linter ที่ช่วยให้คุณระบุปัญหาเมื่อตั้งค่าการเปลี่ยนแปลง
<VtBotDebug/> : ส่วนประกอบการดีบักที่บันทึกเหตุการณ์และข้อมูลของพวกเขาตามที่เกิดขึ้น
<ReplacementSwap/> : การแลกเปลี่ยน DOM ที่เปลี่ยนแปลง () ซึ่งเก็บรักษาองค์ประกอบใน DOM ดั้งเดิมเพื่อหลีกเลี่ยงการปรับเปลี่ยนใหม่ของภาพเคลื่อนไหว IFRames หรือ CSS
<LoadIndicator> : คุณเคยพลาดข้อเสนอแนะภาพบนเว็บไซต์ที่มีการเปลี่ยนมุมมองหรือไม่ว่าแอพสังเกตเห็นการคลิกหรือไม่? คุณต้องการตัวบ่งชี้การโหลด! ไปกันเถอะ!
Zoom , <Move> และแอนิเมชั่น Swing และส่วนประกอบ <AnimationsStyle/> ช่วยให้สามารถเลือกสไตล์การออกแบบได้
<Portal/> ส่วนประกอบที่บังคับให้ดูการเปลี่ยนผ่านทั้งหมดผ่านหน้าพอร์ทัล/การโหลด
<NoScroll/> รักษาตำแหน่งการเลื่อนแนวตั้งและแนวนอนปัจจุบันเมื่อเปลี่ยนไปยังหน้าถัดไป
ปัจจุบัน Bag of Tricks มีการสาธิตทางเทคนิคหลายอย่างที่แสดงตัวอย่างของการใช้เอฟเฟกต์ต่าง ๆ โดยใช้เหตุการณ์การเปลี่ยนแปลงมุมมอง
แหล่งที่มาอยู่ในที่เก็บนี้
สุดท้าย แต่ไม่ท้ายสุดการปรับใช้ยังรวมถึง▶ jotter ◀ด้วยข้อมูลมากมายเกี่ยวกับเหตุการณ์การเปลี่ยนแปลงรวมถึงข้อมูลพื้นหลังและเคล็ดลับและเทคนิคที่มีค่าในการเปลี่ยนมุมมองใน Astro
เนื้อหาบางส่วนเป็นการสาธิตทางเทคนิคบางอย่างเป็นเครื่องมือที่มีประโยชน์และบางส่วนเป็นส่วนประกอบที่สามารถนำกลับมาใช้ใหม่ได้ซึ่งคุณสามารถใช้ในโครงการของคุณเองเพื่อจัดการกับเคสขอบที่นอกเหนือไปจากคุณสมบัติมาตรฐานของ Astro
สำหรับความช่วยเหลือตรวจสอบแท็บ Discussions บน Repo GitHub
แพ็คเกจนี้ได้รับการดูแลโดย Martrapp อย่างอิสระจาก Astro คุณยินดีที่จะมีส่วนร่วมโดยการส่งปัญหาหรือเปิดการประชาสัมพันธ์!
ดู Changelog.md สำหรับประวัติการเปลี่ยนแปลงของแพ็คเกจนี้
