Transition to CSS changes

Question

I have a sidebar with css transition. his works are true when he is open, but does not work when I close the sidenav.

I tried using animation, but it doesn’t work.

<ReactCSSTransitionGroup
     transitionName="example"
     transitionAppear={true}
     transitionLeave={true}
     transitionAppearTimeout={600}
     transitionLeaveTimeout={300}
     >
     <div key={"slidebar"} className="chatBar">
         <Tab />
     </div>
</ReactCSSTransitionGroup>


.example-appear {
    width: 0;
    transition: width 0.5s ease-in-out;
}

.example-appear.example-appear-active {
    width: 17%;
}

.example-leave {
    width: 17%;
    transition: width 0.9s ease-in-out
}

.example-leave.example-leave-active {
    width: 0;
}