@capgo/capacitor-过渡效果

Ionic 风格动画

使用 iOS 和 Android 路由动画，模仿移动导航模式，而不需要将 Ionic 组件发送。

滑动回退

启用一个 iOS 边缘手势，跟随手指，并且可以在原生 Capacitor iOS 中自动启用。

框架无关

直接使用 Web 组件或为 React、Vue、Angular、Svelte 和 Solid 提供帮助。

无 UI 约束

带来自己的工具栏、内容、底部导航和路由器，而库协调过渡层。

何时使用它

@capgo/capacitor-transitions 适用于那些想要 Ionic 质量页面动画，而不采用 Ionic 组件系统的应用。它保留了在现有 Web 路由器中的导航，并在 Capacitor WebView 内动画化页面元素。

在需要时使用它：

• 推送、弹出和根路由转换，感觉与平台约定相似
• 协调标题、内容和页脚动画
• 页面缓存，快速后退导航
• 可选的iOS边缘滑动返回手势，跟随用户的手指
• 框架特定设置助手，无框架特定路由

注意

该包不渲染原生 UIKit 或 Android 导航 chrome。对于原生导航栏、标签栏和原生转换壳，请使用 @capgo/原生导航.

演示

React转场流程

API核心

• <cap-router-outlet> 拥有动画路由栈。
• <cap-page> 包裹每个页面。
• <cap-header>, <cap-content>, 和 <cap-footer> 确定应该一起移动的区域。
• initTransitions(options?) 初始化框架绑定。
• setDirection('forward' | 'back' | 'root' | 'none') 告诉下一个路由更新哪个动画要运行。
• setupRouterOutlet(element, options?) 连接一个插口到生命周期和手势行为。
• setupPage(element, callbacks?) 注册页面生命周期回调。

平台模型

platform="auto" 从运行环境中选择 iOS 或 Android 动画配置文件。您可以强制 platform="ios" 或 platform="android" 测试时

swipe-gesture="auto" 使用 Capacitor 运行时辅助函数，并仅在本机 iOS Capacitor 应用中启用边缘手势。使用 true 强制启用 false 禁用

该手势在 web 层中实现。它旨在让动画进度从指针位置驱动，根据距离和速度来完成或取消。

继续 @capgo/capacitor-transitions

如果您正在使用 @capgo/capacitor-过渡 为了规划原生媒体和界面行为，连接它 使用 @capgo/capacitor-过渡 为原生能力在使用 @capgo/capacitor-过渡 使用 @capgo/capacitor-直播活动 为原生能力在使用 @capgo/capacitor-直播活动 @capgo/capacitor-直播活动 为 @capgo/capacitor-直播活动 的实现细节 使用 @capgo/capacitor-视频播放器 为原生能力在使用 @capgo/capacitor-视频播放器 @capgo/capacitor-视频播放器 为 @capgo/capacitor-视频播放器 的实现细节