为什么我的reactjs侧边栏转换代码不起作用？

Question

我希望我的侧边栏作为滑块从上到下移动，我尝试了其他方法，例如不透明度和变换，但我的代码仍然不起作用。

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

您可以保留列表的标准首选项并仅更改一些特定的属性。我认为你可以使用“可见性：;”隐藏和显示列表的 css 属性。检查此代码。

.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;
}

如果您愿意，您可以调整一些属性。