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

Question

我正在构建一个Ionic React(使用Ionic 6和电容器(应用程序。我有两页，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';