跳过内容

@capgo/capacitor-过渡

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

采用 Ionic 风格的运动

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

滑动回退

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

框架无关

使用 Web 组件直接或 React、Vue、Angular、Svelte 和 Solid 的辅助函数。

无 UI 锁定

自定义工具栏、内容、底部导航和路由,Capgo 库负责转场层的协调。

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

使用它时需要:

  • 模拟平台约定的 push、pop 和 root 路由转场
  • 协调的头部、内容和底部导航
  • 快速后退导航的页面缓存
  • 可选的 iOS 边缘滑动返回手势,跟随用户的手指
  • 框架特定的设置辅助函数而无需框架特定的路由
使用 Capacitor 风格壳的动画 React 页面转场演示,演示前进和后退导航
React 转场流程
  • <cap-router-outlet> 包裹每个页面
  • <cap-page> 本包不渲染原生 UIKit 或 Android 导航栏。要使用原生导航栏、标签栏和原生转场壳,请使用
  • <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-transitions

如果您正在使用 @capgo/capacitor-transitions 来规划原生媒体和界面行为,连接它与 使用@capgo/capacitor-transitions for the native capability in Using @capgo/capacitor-transitions, 使用@capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities 为 @capgo/capacitor-live-activities 的实现细节 使用 @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 的原生能力 @capgo/capacitor-video-player 为 @capgo/capacitor-video-player 的实现细节