Transition when CSS change with State

I have a sidebar that minimize when i click on a button. I use a Class component and I have a state to deal with it.

If true, the sidebar width is 200px. if false, it is 70px.

render() {
    const SidebarStyled = styled.div`
      width: ${this.state.sidebarOpen ? '200px' : '70px'};
      position: fixed;
      left: 0px;
      top: 0px;
      height: 100vh;
      background-color: #0c1635;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

I would like to set a transition and I have no idea how. The only solutions I found was with functional components, and my client want only class Components.

Any help ?

CodePudding user response：

I guess, You are creating a const SidebarStyled and based on the state.sidebarOpen deciding the value of width, but the thing is the style is resolved and applied to the component and it does not change with the state change. I would suggest you create two style const one with width: 200px and other with 70px and based on the state.sidebarOpen apply appropriate style const.