Capgo过渡__CAPGO_KEEP_0__仓库

安装

您可以使用我们的AI辅助设置来安装插件。使用以下命令将Capgo技能添加到您的AI工具中。

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

然后使用以下提示:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-transitions` plugin in my project.

如果您更喜欢手动设置，请按照以下命令安装插件，并遵循以下平台特定的说明:

1. 安装包

   npm install @capgo/capacitor-transitions

2. 注册 Web 组件

   import '@capgo/capacitor-transitions';

3. 包装路由页面

   <cap-router-outlet platform="auto" swipe-gesture="auto">
     <cap-page>
       <cap-header slot="header">
         <h1>Inbox</h1>
       </cap-header>
   
       <cap-content slot="content">
         <button>Open message</button>
       </cap-content>
   
       <cap-footer slot="footer">
         <nav>Tabs</nav>
       </cap-footer>
     </cap-page>
   </cap-router-outlet>

4. 在路由器改变路由之前设置方向

   import { setDirection } from '@capgo/capacitor-transitions/react';
   
   setDirection('forward');
   router.push('/message/42');
   
   setDirection('back');
   router.back();

注意

该包没有本地同步步骤。它在您的Capacitor应用的Web层运行。

React配置

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';
import '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!outletRef.current) return;

    setupRouterOutlet(outletRef.current, {
      platform: 'auto',
      swipeGesture: 'auto',
    });
  }, []);

  return (
    <cap-router-outlet ref={outletRef}>
      {/* Your router renders cap-page children here. */}
    </cap-router-outlet>
  );
}

export function InboxPage() {
  const navigate = useNavigate();
  const pageRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!pageRef.current) return;

    return setupPage(pageRef.current, {
      onDidEnter: () => console.log('Inbox visible'),
    });
  }, []);

  return (
    <cap-page ref={pageRef}>
      <cap-header slot="header">
        <h1>Inbox</h1>
      </cap-header>

      <cap-content slot="content">
        <button
          onClick={() => {
            setDirection('forward');
            navigate('/message/42');
          }}
        >
          Open message
        </button>
      </cap-content>
    </cap-page>
  );
}

React JSX TypeScript

从中导入 @capgo/capacitor-transitions/react 包含JSX类型定义的 cap-router-outlet, cap-page, cap-header, cap-content，和 cap-footer。在大多数React项目中，这个导入使自定义元素在TSX中自动有效。

如果 TypeScript 还报告错误 Property 'cap-router-outlet' does not exist on type 'JSX.IntrinsicElements'添加一个项目声明文件:

src/capgo-过渡.d.ts

import '@capgo/capacitor-transitions/react';

context: Capgo营销网站. 角色: UI标签. 见于: 页面代理/[slug].astro. 消息键 `agents_page_copy_label` (代理页面复制标签). src/ 对于 Next.js，直接放入 src/ 是足够的。对于Next.js，放置它在 tsconfig.json 或项目根目录，并确保

{
  "include": ["src", "src/capgo-transitions.d.ts"]
}

包含它: types/ 对于自定义TypeScript或webpack设置，使用单独的文件夹，包含该文件夹：

{
  "include": ["src", "types"]
}

滑动返回

从标记中启用或禁用 iOS 边缘手势：

<cap-router-outlet swipe-gesture="auto"></cap-router-outlet>
<cap-router-outlet swipe-gesture="true"></cap-router-outlet>
<cap-router-outlet swipe-gesture="false"></cap-router-outlet>

context

const outlet = document.querySelector('cap-router-outlet');

outlet?.setSwipeGesture('auto');
outlet?.setSwipeGesture(true);
outlet?.setSwipeGesture(false);

auto enables the gesture only when Capacitor reports a native iOS runtime. During the gesture, the page transition follows the finger. When the user releases, the transition either completes and asks the browser history to go back, or cancels and restores the current page.

为了防止元素开始手势，添加 data-swipe-gesture-ignore:

<button data-swipe-gesture-ignore>Open drawer</button>

要防止元素开始手势，请添加

标题：使用原生导航 @capgo/capacitor-transitions 与 @capgo/native-navigation 当原生应该拥有顶部和底部导航栏，而网页内容保持Ionic样式的页面动画时。

1. 安装并同步原生导航包：

   npm install @capgo/native-navigation
   npx cap sync

2. 配置原生浏览器：

   import { NativeNavigation } from '@capgo/native-navigation';
   
   await NativeNavigation.configure({
     contentInsetMode: 'css',
   });
   
   await NativeNavigation.setNavbar({
     title: 'Inbox',
     backButton: { visible: false },
   });

3. 只让网页过渡出口负责页面：

   <cap-router-outlet platform="auto" swipe-gesture="auto">
     <cap-page>
       <cap-content slot="content" fullscreen>
         <main class="native-page">Inbox content</main>
       </cap-content>
     </cap-page>
   </cap-router-outlet>

   .native-page {
     padding-top: var(--cap-native-navigation-top);
     padding-bottom: var(--cap-native-navigation-bottom);
   }

4. 从同一路由事件驱动两种系统：

   import { NativeNavigation } from '@capgo/native-navigation';
   import { setDirection } from '@capgo/capacitor-transitions/react';
   import { router } from './router';
   
   await NativeNavigation.addListener('navbarBack', () => {
     setDirection('back');
     router.back();
   });
   
   async function openMessage(id: string) {
     setDirection('forward');
     router.push(`/message/${id}`);
   
     await NativeNavigation.setNavbar({
       title: 'Message',
       backButton: { visible: true, title: 'Inbox' },
     });
   }

不要将原生顶部栏再次渲染为移动 <cap-header>. 让 @capgo/native-navigation 保持栏原生并使用 @capgo/capacitor-transitions 为 WebView 页面内容

组件

<cap-router-outlet>

属性	类型	默认	描述
platform	'ios' | 'android' | 'auto'	'auto'	动画样式
duration	number	系统默认	动画持续时间（毫秒）
keep-in-dom	boolean	true	保持不活跃页面在 DOM 中
max-cached	number	10	最大缓存页面
swipe-gesture	boolean | 'auto'	'auto'	启用、禁用或检测 iOS 边缘手势

方法：

• push(element, config?)
• pop(config?)
• setRoot(element, config?)
• setSwipeGesture(true | false | 'auto')

<cap-page>

包裹一个页面并发发生命周期事件：

• cap-will-enter
• cap-did-enter
• cap-will-leave
• cap-did-leave

<cap-content>

属性	类型	默认值	简介
fullscreen	boolean	false	让内容在头部后面滚动
scroll-x	boolean	true	启用水平滚动
scroll-y	boolean	true	启用垂直滚动

框架辅助工具

框架入口点暴露相同的核心辅助函数:

import { initTransitions, setDirection, setupPage, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });
setDirection('forward');
setupRouterOutlet(element, { platform: 'auto', swipeGesture: 'auto' });
setupPage(element, { onWillEnter, onDidEnter, onWillLeave, onDidLeave });

上下文:Capgo营销网站。角色: UI标签。见于:页面代理/[slug].astro。消息键`agents_page_copy_label` (代理页面复制标签)。

• @capgo/capacitor-transitions/react
• @capgo/capacitor-transitions/vue
• @capgo/capacitor-transitions/angular
• @capgo/capacitor-transitions/svelte
• @capgo/capacitor-transitions/solid

可用入口点:

继续从开始 开始使用 为迁移和企业运营规划，连接它 使用@capgo/capacitor-过渡 为@capgo/capacitor-过渡中的本地能力 @Capgo企业 为@Capgo企业中的产品流程 Ionic 企业插件替代品 为Ionic 企业插件替代品中的产品流程 @Capgo替代品 为@Capgo替代品中的产品流程， @Capgo咨询 for the product workflow in @Capgo Consulting.