@capgo/capacitor-transitions

Add native-feeling route transitions and optional iOS edge swipe-back to Capacitor apps without adopting Ionic UI.

开始使用 GitHub

类似Ionic的动画

不需要在应用中引入Ionic组件的情况下，模仿移动设备导航模式实现iOS和Android路由动画。

滑动返回

在原生Capacitor iOS中仅在触摸时自动启用iOS边缘手势。

框架无关

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

无UI锁定

在库中协调过渡层时，您可以自定义工具栏、内容、底部导航和路由。

何时使用它

@capgo/capacitor-transitions is for apps that want Ionic-quality page motion without adopting Ionic’s component system. It keeps navigation in your existing web router and animates page elements inside the Capacitor WebView.

使用它时需要：

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

演示

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 Model

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 为native媒体和界面行为做好准备，连接它使用@capgo/capacitor-transitions 为使用@capgo/capacitor-transitions的native能力使用@capgo/capacitor-live-activities 为使用@capgo/capacitor-live-activities的native能力 @capgo/capacitor-live-activities 为@capgo/capacitor-live-activities的实现细节使用@capgo/capacitor-video-player 为使用@capgo/capacitor-video-player的native能力 @capgo/capacitor-video-player 为@capgo/capacitor-video-player的实现细节