Ionic 6 with React - 页面导航上没有动画

Question

我正在构建一个 Ionic React（使用 Ionic 6 和 Capacitor）应用程序。我有两页，Home并且Profile。我想在主页和个人资料页面之间导航，它可以工作，但 iOS 模拟器上没有推送动画。

这是我的路由器（在 App.tsx 上）：

 <IonApp>
     <IonRouterOutlet>
      <IonReactRouter>
        <Route exact path="/home" component={Home} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonReactRouter>
    </IonRouterOutlet>
 </IonApp >

当然，Home 和 Profile 作为IonPage根元素。

return (
        <IonPage>
            ...
            ...
       </IonPage>
);

我使用 useIonRouter 钩子，如下所示：

 const router = useIonRouter();
 const displayProfile = () => {
    router.push('/profile', 'forward', 'push');
};

它确实会转到“个人资料”页面，但根本没有动画。除了在他们的网站上的基本示例之外，我找不到任何其他内容。

Answer 1

根据官方示例，请务必包含 CSS

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';