astro vtbot

不，它不是機器人嗎？ B ag f t ricks！

支持這項作品告到明星

Astro視圖過渡的技巧包

技巧包提供了圍繞Astro的視圖過渡的擴展和支持。

當前可以在https://events-3bg.pages.dev/上找到技術演示和文檔的部署。

!!!!袋子裡的新技巧？ !!!!

為您帶來最新版本的 @vtbag/element-crossing，其中一個錯誤修復了讓data-*屬性跨越新頁面的錯誤！

有關詳細信息，請參閱元素跨的更換。

最近學會了技巧

檢查室DevTools現在為pnpm項目工作！
大喊大叫，“謝謝！”向盧卡斯提供此修復程序！

瀏覽器本性跨文檔視圖轉換的新組件： <CamShaft>組件可防止由視圖過渡組導致視圖時，當導航到不同的垂直滾動位置時，視圖過渡組引起的偽平滑滾動效應。

<TurnSignal>啟用了由transition:animate與本機跨文檔@view-transition{}一起使用。可選地，您可以使用網站頁面的總順序配置組件，從而使其自動檢測到過渡方向。

<ElementCrossing />是對您中的那些嘗試使用CSS的跨文檔視圖過渡的人的組成部分，並且錯過了一種在導航之間保存HTML元素狀態的方法：將選定的元素狀態轉移到另一側！

檢查室：請參閱前所未有的觀點過渡：檢查每個細節，揭示，調試和優化！現在，深入了解視圖過渡API引入的每個偽元素的效果，甚至有選擇地切換單個動畫，以更好地了解正在發生的事情！召喚檢查室以組件（<supplyceythamber />）或安裝袋子作為集成！並從DevToolbar訪問會議廳！

星光支持：曾經想看到您的星光站點的外觀，並啟用了視圖過渡？請按照以下步驟擺脫全頁負載，並使您的星光站點看起來像水療中心！

可重複使用的組件？

• 由於您在頁面上有iframe的問題，需要進行視圖過渡的擴展嗎？
• 想要在理解和調試視圖過渡方面提供支持，還是只是想要第二對眼睛？在您的視圖過渡設置上？
• 尋找可重複使用的動畫或特殊過渡效果？
• 是否想在星光網站上使用視圖過渡？

astro-vtbot軟件包不是整體庫。使用所需的組件，僅為這些組件支付帶寬。

成分	添加了brotli字節
動畫風格	〜0.1k
自動置換？	〜0.3K
BorderControl？	〜0.1k
剎車？	〜0.2k
凸輪軸？	〜0.6K
元素交叉？	〜1.2k
檢查室？	〜27K
linter？	〜1.9k
加載輔助器⏳	〜0.4k
移動 ？	〜0.2k
noscroll	〜0.1k
PageOffset？ ⇞	〜0.1k
pointeronNavigation？	〜0.1k
門戶網站 ？	〜0.2k
替換	〜0.5k
星光…？	〜3.0k
交換？	-0.3k
搖擺 ？	〜0.1k
轉折？	〜0.5k
vtbotdebug？	〜2.8K
飛漲 ？	〜0.1k

訪問可重複使用的組件的文檔以獲取詳細信息。

• <Linter/> ：一個Linter組件，可幫助您在設置過渡時確定問題。

• <VtBotDebug/> ：在發生時記錄事件及其數據的調試組件。

• <ReplacementSwap/> ：一種替代的dom swap（），它保留了原始DOM中的元素，以避免重新定制iframe或css動畫。

• <LoadIndicator> ：您是否曾經錯過有關該應用程序是否注意到單擊的網站上的視覺反饋？您需要一個加載指示器！幹得好！

• Zoom ， <Move>和Swing Animations以及<AnimationsStyle/>組件允許擴展樣式選項。

• <Portal/>組件通過門戶/加載頁面迫使所有查看過渡。

• <NoScroll/>在過渡到下一頁時，請保持當前的垂直和水平滾動位置。

技術演示

當前，技巧包包含幾個技術演示，這些演示顯示了使用視圖過渡事件實現各種效果的示例。

來源在此存儲庫中。

慢跑者？

最後但並非最不重要的一點是，部署還包括有關過渡事件的大量信息以及背景信息以及關於Astro中視圖過渡的寶貴技巧和技巧的大量信息。

其中一些內容是技術演示，有些是有用的工具，有些是可重複使用的組件，您可以在自己的項目中使用，以處理超出Astro的標準功能的邊緣案例。

故障排除

為了幫助您，請查看有關GitHub存儲庫的Discussions選項卡。

貢獻

此包裝由Martrapp獨立於Astro維護。歡迎您通過提交問題或開放PR來做出貢獻！

ChangElog

有關此軟件包的更改歷史記錄，請參見ChangElog.md。