如何在Ionic 6 React中实现Android原生过度滚动效果

你要实现的是Android原生的页面侧滑返回过渡效果（右滑返回时当前页面右移+缩放+透明，上一页从左侧滑入恢复），用Ionic的动画API可以简单实现，不用复杂CSS修改：

1. 创建自定义动画配置文件
   在项目中新建android-back-transition.ts，写入以下代码：

import { Animation, createAnimation } from '@ionic/react';

export const androidBackTransition = () => {
  // 当前页面（要离开的页面）动画
  const leavingPage = createAnimation()
    .addElement(document.querySelector('.ion-page:last-child')!)
    .duration(300)
    .easing('cubic-bezier(0.4, 0.0, 0.2, 1)')
    .fromTo('transform', 'translateX(0) scale(1)', 'translateX(100%) scale(0.95)')
    .fromTo('opacity', '1', '0.5');

  // 上一个页面（要进入的页面）动画
  const enteringPage = createAnimation()
    .addElement(document.querySelector('.ion-page:nth-last-child(2)')!)
    .duration(300)
    .easing('cubic-bezier(0.4, 0.0, 0.2, 1)')
    .fromTo('transform', 'translateX(-20%)', 'translateX(0)')
    .fromTo('opacity', '0.8', '1');

  return createAnimation().addAnimation([leavingPage, enteringPage]);
};

2. 全局应用这个动画
   在main.tsx中初始化Ionic时，配置全局返回动画：

import { setupIonicReact } from '@ionic/react';
import { androidBackTransition } from './android-back-transition';

setupIonicReact({
  mode: 'md', // 强制使用Android风格模式
  backButtonTransition: androidBackTransition,
});

3. 注意事项

• 所有页面必须用<IonPage>组件包裹，这是Ionic路由动画生效的基础。
• 可以根据需求微调动画参数：比如调整scale数值、translateX位移距离或duration时长，让效果更贴近原生。
• 如果是手动触发返回（比如自定义返回按钮），可以在调用navigateBack时指定动画：

import { useIonRouter } from '@ionic/react';
import { androidBackTransition } from './android-back-transition';

const YourComponent = () => {
  const router = useIonRouter();

  const goBack = () => {
    router.navigateBack('/', { animation: androidBackTransition });
  };

  return <IonButton onClick={goBack}>返回</IonButton>;
};

内容的提问来源于stack exchange，提问作者Lone Foxed