跳过内容

@capgo/capacitor-过渡效果

为Capacitor添加原生路由过渡和可选的iOS边缘滑动返回

ionic 风格动画

使用 iOS 和 Android 路由动画,模仿移动设备导航模式,避免将 Ionic 组件发送。

滑动回退

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

框架无关

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

无 UI 约束

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

@capgo/capacitor-transitions 适用于希望在不采用 Ionic 组件系统的情况下获得 Ionic 质量页面动画的应用程序。它保留了您的现有 Web 路由中的导航,并在 Capacitor WebView 内动画化页面元素。

在需要时使用它:

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

标题:演示

sectionTitle
动画React页面转场演示,展示向前和向后的导航在一个Capacitor样式的外壳中
React转场流程
  • <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" context

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

或

继续从@capgo/capacitor-过渡

从@capgo/capacitor-过渡继续前进

继续 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions 中的内容 @capgo/capacitor-过渡 为了规划原生媒体和界面行为,连接它 使用@capgo/capacitor-过渡 为原生能力在使用@capgo/capacitor-过渡 使用@capgo/capacitor-直播活动 为原生能力在使用@capgo/capacitor-直播活动 @capgo/capacitor-直播活动 为@capgo/capacitor-直播活动的实现细节 使用@capgo/capacitor-视频播放器 为原生能力在使用@capgo/capacitor-视频播放器,并且 @capgo/capacitor-视频播放器 为@capgo/capacitor-视频播放器的实现细节