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。