Why my transition code for sidebar in reactjs dosen`t work?

Question

I want my sidebar to move from up to down as a slider, I tried other methods like opacity and transform, but still my code doesn't work.

I want my sidebar list to slide from top to bottom or right to left when I click on my hamburger menu, but now it just appears and disappears.There is no problem with my hamburger menu and everything works and my only problem is the appearance and disappearance of the sidebar. 'Consider "options" as a sidebar'.

JSX

<div className={`${style.options} ${isExpanded && style.expanded}`}>
  <ul className={style.category}>
    <li>Bags</li>
    <li>Shoes</li>
    <li>T-Shirts</li>
  </ul>          
</div>

CSS

:root {
  --primary_color: #50bed2;
  --dim_primary: rgba(80, 191, 210, 0.4);
  --dark_color: #202124;
  --light_color: #f9f9f9;
  --radius: 8px;
  --border: 1px solid rgba(0, 0, 0, 0.1);
  --padding_container: 1.5rem 4rem;
  --smooth: all 0.4s ease;
}
.options {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        transition: var(--smooth);
    }
.options.expanded {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        background-color: var(--light_color);
        border-left: var(--border);
        border-bottom: var(--border);
        padding: 1rem;
        transition: var(--smooth);
        top: 10.8rem;
    }

Answer 1

You can keep the standard preferences for your list and change only some specific properties. I think you can use the 'visibility: ;' css property to hide and show your list.

Check out this code:

.options {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  background-color: var(--light_color);
  border-left: var(--border);
  border-bottom: var(--border);
  padding: 1rem;

  position: absolute;
  top: -100%;
  opacity: 0%;
  visibility: visible;
  transition: var(--smooth);
}

.options.expanded {
  visibility: visible;
  opacity: 100%;
  top: 12px;
}

You can adjust the some properties if you prefer.