在JavaScript中切换CSS时如何添加衰落效果

如何解决在JavaScript中切换CSS时如何添加衰落效果

当它切换css stlye属性并添加classList时，我想添加渐变效果功能。
JS：

function darkMode(){
    document.body.classList.toggle("dark-theme");
}
function dropDown(){
    var options = document.getElementById("options")
    options.style.display == "block" ? options.style.display = "none" : 
    options.style.display = "block"; 
    options.classList.toggle("active")
}

css：

#options{
    display: none;
    opacity: 0;
    position: absolute;
    width: 250px;
    height: auto;
    background: var(--main-bg-color);
    border-radius: 5px;
    top: 80px;
    font-size: 17.5px;
    padding: 10px;
    Box-shadow: 0 4px 9.5px 0 rgba(0,0.2),0 2px 4px 0 rgba(0,0.1),inset 0 0 0 1px rgba(255,255,0.5);
    transition: ease-in-out .125s;
}
#options.active{
    top: 65px; 
    opacity: 1;
    transition: ease-in-out .25s;
}

html：

<div class="profile-top" onclick="dropDown()">
                <div class="header-nav">
                    <p class="top-profile-name">
                        name
                    </p>
                    <img class="profile-image" src="..\img\img.png\">
                    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="dropdown-icon" data-v-49c8d0d2="">
                        <path d="M1 1L5 5L9 1" stroke="white" data-v-49c8d0d2=""></path>
                    </svg>
                </div>
                <div class="top-profile-menu"  id="options">
                    <div class="setting-buttons">
                        <img class="setting-icons" src="..\img\settings.svg\">
                        <a class="profile-parameters">
                            settings
                        </a>
                    </div>
                    <div class="setting-buttons" onclick="darkMode()">
                        <img class="setting-icons" src="..\img\moon.svg\">
                        <a class="profile-parameters">
                            dark design
                        </a>
                    </div>
                    <div class="setting-buttons">
                        <img class="setting-icons" src="..\img\logout.svg\">
                        <a class="profile-parameters">
                            logout
                        </a>
                    </div>
                </div>
            </div>

这是jsfiddle处的完整html css和js代码
我有一个div元素，当您单击它时，funcion（darkMode）打开，并将css属性display: none;更改为display: block;并添加了ClassLists，我在css中添加了transition属性，但是当显示更改时，转换无效。我想在不使用jquery的情况下进行过渡工作，或以某种方式添加js淡入淡出效果。

解决方法

在第二堂课中添加visability: hidden;和visability: visible;