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

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但是如果我在and之间切换NotificationsPage，后者只会弹出而不是动画。

我试过用没有运气的CSSTransition包装TransitionGroup。

任何想法如何去做？

提前致谢 ：）

标签： reactjsreact-transition-groupreactcsstransitiongroup