Javascript 如何使用动画管理动态侧边栏的状态？

我是一个全新的人，我很难做出反应，很难实现一个对每个页面都是动态的侧边栏，并且它的动画不应该阻止应用程序核心内容的导航

下面是应用程序的根目录

<Router>
    <div className="app-container">

      <LeftSidebar sidebarState={ this.state.sidebar.left } />
      <RightSidebar sidebarState={ this.state.sidebar.right } />

      <div
        style={{
          marginLeft: (this.state.sidebar.left.open ? this.state.sidebar.left.width : 0),
          marginRight: (this.state.sidebar.right.open ? this.state.sidebar.right.width : 0)
        }}
        className='app-content'>
        <Toolbar toggleSidebar={ this.toggleSidebar } />
        <Switch>
          <Route exact path="/" component={ Dashboard } />
          <Redirect from="/dashboard" to="/" />
          <Route path="/gear" render={ (props) => <Gear {...props} toggleSidebar={ this.toggleSidebar } /> } />
          <Route component={ PageNotFound } />
        </Switch>
      </div>

    </div>
  </Router>

} />

侧边栏位于顶部，绝对位于左侧和右侧。（这些设置为平移-100%和100%设置为动画输入和输出，应用程序内容移动边距时具有相同的过渡）

appcontent

div包含主内容，它是活动组件

我正在处理

/gear

组件，我正在添加一个侧栏来编辑一个项目，尽管我希望侧栏可用，因为我很可能会在其他视图中使用它

为了尝试解决这个问题，我为gear侧边栏制作了一个新的组件（并根据需要制作其他侧边栏组件），然后将其移动到gear组件中，然后使用入口将其移动到主体中，以便正确地进行样式设置。然后我会通过传递一个toggleSidebar函数来切换它，该函数只会翻转给定端状态中的一个布尔值。这有点奏效，但当在页面之间导航时，我尝试使用ReactCsStrasitionGroup，但我不想让主要内容等待超时，因为加载新组件时可能会发生超时

因此，由于我需要加载侧边栏，并在其连接的组件卸载时设置关闭动画（如果打开），因此将其移动到父级才有意义

唯一的问题是，如何在侧边栏中加载一个动态传递的组件，然后在加载之前等待超时以使动画能够发生，这样更容易解决

我正在考虑将一个函数传递给导航到的组件，可以执行该函数来传递要在侧栏中呈现的组件。它需要是一个组件，因为它仍然需要附加方法等

否则，我认为使用路由器可能有效，但我不确定在卸载路由器时是否可以超时（如果打开），以防止它移动到其他路由

最后，目前我让它工作的唯一方法是详细定义侧栏，并根据路由挂载它们，基本上是制作一个自定义路由器

真的很难做到这一点，任何帮助都值得赞赏