HTML css добавить переход для создания эффекта складной панели

Question

У меня есть боковая панель, которую я скрываю и показываю с состоянием, которое проверяет состояние. Если состояние открыто, условие истинно и отображает боковую панель. Если состояние ложно, на боковой панели отображается только значок разворачивания значка. Я не использовал свойства panel.collapse, но хотел бы добавить свойство перехода к css, чтобы оно выглядело так, как будто панель скользит с задержкой.

Я не уверен, как закодируйте это, чтобы заставить это работать. Спасибо

Вот мой код, который просто скрывает и показывает

render() {
  return (
   <Grid className={this.state.showPanel ? myStyle.myPanel : myStyle.myCollapsedPanel}>
    <i className="fas right-arrow-circle" onClick={this.setCollapseExpand}/>
    <this.state.showPanel && (
    <p> This is my test </>
    )}
   </Grid>
  )
}

// in jsx

 setCollapseExpand() {
   this.setState({{showPanel: !this.showPanel})
 }

//css
.myPanel
 width: 250px
 transform: translateX(0px)
 transition: transform 1s ease-in

.myPanel.slideIn
 transform: translateX(-250px)

.myPanel.slideOut
 transform: translateX(0px)

.myCollapsePanel
 width 50px