跳过内容

@capgo/capacitor-transitions

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

Ionic 风格动画

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

滑动返回

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

框架无关

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

无 UI 约束

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

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

使用它时需要:

  • 模仿平台约定实现的push、pop和root路由转换
  • 协调的头部、内容和底部导航
  • 用于快速后退导航的页面缓存
  • 可选的iOS边缘滑动返回手势,遵循用户的手指
  • 框架特定设置助手而无需框架特定路由器

@__CAPGO_KEEP_0__/native-navigation

演示
Animated React page transition demo showing forward and back navigation in a Capacitor-style shell
使用 __CAPGO_KEEP_0__ 风格壳的前进和后退导航的动画 React 页面过渡演示

Core API

API 核心
  • <cap-router-outlet> 标题:__CAPGO_KEEP_0__ 核心
  • <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-transitions for the native capability in Using @capgo/capacitor-transitions, 使用@capgo/capacitor-transitions for the native capability in Using @capgo/capacitor-live-activities, 使用@capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, 使用@capgo/capacitor-视频播放器 为@capgo/capacitor-视频播放器的原生能力 使用@capgo/capacitor-视频播放器 为@capgo/capacitor-视频播放器的实现细节