I gonna add some transition or animation when my class toggling, for instance, on these below codes, I have a sidebar which I've added some animation to it, with CSS Animation library.
when sidebar opens, that I've toggle it with another class, animation working, but when it's closing, animation doesn't work anymore.

more detail about what I want:

1- I'm gonna when sidebar1 class being toggle with sidebar\_menu, some animation or transition grow to apply on it, as I explained at the top, I mean when sidebar being closed animation or transition grow to apply on it

2- it's all right when the sidebar open, I just want when the sidebar get open via animation, being closed with animation, that's all
I'm sorry if I explained badly.
if it was any question please ask I'll answer

here a demo of what I made, that I think it shows my mean better
[Demo](https://jsfiddle.net/mohammadali0120/6nLjrhgc/1/)

here my JQ codes:

```
$(document).ready(function() {
   $(".response_menu_icon").click(function() {
      $(".sidebar1").toggleClass("sidebar_menu");
   });
   //
   $(".response_more_icon").click(function() {
      $(".area1").toggleClass("area_more");
   });
});

```

here my HTML codes:

```
<i data-feather="more-horizontal" class="response_more_icon"></i>
<!--  -->
<a href="" class="sidebar1 animate__animated animate__slideInRight">
     <div class="sidebar_right">
        <!--  -->
        <h4>Dashboard</h4>
        <a href=""><i data-feather="settings"></i><span>dashboard</span></a>
        <!--  -->
     </div>
</a>

```

and here my CSS codes:

```
.sidebar1 {
   display: none;
}
.sidebar_menu {
   // display: none;
   width: 250px;
   height: 100%;
   position: fixed;
   top: 80px;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   text-align: center;
   background-color: #ffffff;
   -webkit-box-shadow: -2px 10px 8px 3px #eeeeee;
   -moz-box-shadow: -2px 10px 8px 3px #eeeeee;
   box-shadow: -2px 10px 8px 3px #eeeeee;
}

```