反应“类似路由器”的动画

Question

我有一个侧边栏滑动菜单，该菜单的作用类似于带过渡的路由器，但基于应用程序的状态（redux）而不是路由。

第一次打开菜单时，过渡效果很好。但是，当我在菜单的两个内部组件之间切换时，没有动画。

以下是该组件的代码：

const SidebarInnerPages = () => {
  const { selectedPage } = useSelector((state) => state.sidebarInnerPages)

  let inner = null
  if (selectedPage === "profile") {
    inner = <ProfilePage />
  } else if (selectedPage === "settings") {
    inner = <SettingsPage />
  } else if (selectedPage === "notifications") {
    inner = <NotificationsPage />
  }

  return (
    <CSSTransition
      in={!!selectedPage}
      unmountOnExit
      timeout={600}
      classNames={{ ...styles }}
    >
      <div className={styles.innerPagesContainer}>{inner}</div>
    </CSSTransition>
  )
}

因此，第一次更改selectedPage时，菜单会很好地滑动。但是，如果我在SettingsPage和NotificationsPage之间切换，则后者会弹出而不是动画。

我尝试用CSSTransition将TransitionGroup包裹起来，但没有运气。

有什么想法怎么做吗？

预先感谢：）