反应-布局更改之间的过渡

Question

我想通过转换来更改React组件的布局。 下面的代码在两个视图之间切换，但是我希望边栏从右侧滑入，而Hotel-View也在左侧滑入。

实现此目标的最佳方法是什么？ 对于使用React Transition Group是否适合此目的，我感到困惑。

return (
        <div className="container">
          <div className="content">
            <div
              className={!store.getState().sideWindow ? "sidebar2" : "sidebar"} 
            >
              <div className="box1"></div>
              <div className="box2"></div>
              <div className="box3">

            </Stage> */}
              </div>
            </div>
            <main className="hotel-view">
              <SimpleMap />
            </main>
          </div>
        </div>
      )

.container {
    max-width: 100%;
    max-height: 90%;    
    color: darkgreen;
    box-shadow: black;
    min-height: 50rem;
}

.content {
    display: flex;
    height: 100%;
}

.sidebar {  
    flex: 0 0 -30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    order:2;   
}

.sidebar2 {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    order: 2;
}

.hotel-view {       
    flex: 1;
    order:1;
}