@capgo/capacitor-transitions

Ionic 风格运动

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

滑动返回

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

框架无关

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

无 UI 锁定

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

何时使用它

@capgo/capacitor-transitions 适用于希望在现有 web 路由中实现 Ionic 质量页面动画的应用程序。它在 Capacitor WebView 内部动画页面元素，而不采用 Ionic 组件系统。

使用它时需要：

• push、pop 和 root 路由转换，感觉接近平台约定
• 协调的头部、内容和底部动画
• 页面缓存以快速后退导航
• 可选的 iOS 边缘滑动返回手势，遵循用户的手指
• 框架特定设置助手而无框架特定路由

注意

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

演示

React 过渡流程

API 核心

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

平台模型

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

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

手势在 web 层实现。它旨在让它感觉像 Ionic 的 iOS 滑动返回转换一样，通过从指针位置驱动动画进度，然后根据距离和速度来完成或取消。

从 @capgo/capacitor-transitions 继续

如果您正在使用 @capgo/capacitor-transitions 规划原生媒体和界面行为，连接它与 使用 @capgo/capacitor-transitions 原生能力在使用 @capgo/capacitor-transitions 中 使用 @capgo/capacitor-live-activities 原生能力在使用 @capgo/capacitor-live-activities 中 @capgo/capacitor-live-activities 原生能力在 @capgo/capacitor-live-activities 中 使用 @capgo/capacitor-video-player 原生能力在使用 @capgo/capacitor-video-player 中 @capgo/capacitor-视频播放器 了解 @capgo/capacitor-视频播放器 的具体实现细节。