@capgo/capacitor-transitions

在Capacitor应用中添加本地化的路由切换和可选的iOS边缘滑动返回功能,无需采用Ionic UI。

开始 GitHub

Ionic 风格动画

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

滑动回

启用一个跟随手指的 iOS 边缘手势，仅在原生 Capacitor iOS 中自动启用.

框架无关

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

无 UI 锁定

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

何时使用

@capgo/capacitor-transitions 用于希望拥有Ionic质量页面动画但不采用Ionic组件系统的应用。它在您的现有Web路由器中保留导航，并在Capacitor WebView中动画化页面元素。

使用它时需要：

模仿平台约定推送、弹出和根路由过渡
协调的头部、内容和底部导航
页面缓存以实现快速后退导航
可选的iOS边缘滑动返回手势，遵循用户的手指
不需要框架特定路由器的框架特定设置助手

标题：Demo

Animated React page transition demo showing forward and back navigation in a Capacitor-style shell — 标题：Core __CAPGO_KEEP_0__

API 控制动画路由栈。

<cap-router-outlet> 并
<cap-page> 识别应该一起移动的区域。
<cap-header>, <cap-content>native-navigation <cap-footer> Core Capgo
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 禁用它。

The gesture is implemented in the web layer. It is designed to feel like Ionic’s iOS swipe-back transition by driving animation progress from the pointer position, then finishing or cancelling based on distance and velocity.

继续从 @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-video-player 为@capgo/capacitor-video-player的实现细节