在 JavaScript 中切换 css 时如何添加淡入淡出效果

Question

我想在切换 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, 0, 0.2),0 2px 4px 0 rgba(0, 0, 0, 0.1),inset 0 0 0 1px rgba(255, 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; 和addsClassLists，我在css中添加了transition属性，但是当显示改变时，transitions不起作用。 我想让过渡工作，或者以某种方式添加 js 淡入淡出效果，而不使用 jquery。

Answer 1

添加visability: hidden; 和visability: visible; 在二等舱