Ionic风格的运动
使用iOS和Android路由动画,模仿移动设备导航模式,而不需要发送Ionic组件。
Ionic风格的运动
使用iOS和Android路由动画,模仿移动设备导航模式,而不需要发送Ionic组件。
滑动返回
启用一个跟随手指的iOS边缘手势,仅在Capacitor iOS中自动启用。
框架无关
直接使用 Web 组件或为 React、Vue、Angular、Svelte 和 Solid 提供帮助。
无 UI 约束
带来自己的工具栏、内容、底部导航和路由器,而库协调过渡层。
@capgo/capacitor-transitions 适用于希望在不采用 Ionic 组件系统的情况下实现 Ionic 质量页面动画的应用。它保留了您的现有 Web 路由器中的导航,并在 Capacitor WebView 内部动画化页面元素。
使用它时需要:

<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" 在测试中使用。
swipe-gesture="auto" 使用Capacitor运行时辅助工具,并仅在本机 iOS Capacitor 应用中启用边缘手势。使用 true 为了强制启用或 false 为了禁用它。
手势在web层中实现。它旨在让它感觉像Ionic的iOS滑动返回转换一样,通过驱动动画进度从指针位置,然后根据距离和速度来完成或取消。
如果您正在使用 @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 的实现细节