如何在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="..imgimg.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="..imgsettings.svg">
<a class="profile-parameters">
settings
</a>
</div>
<div class="setting-buttons" onclick="darkMode()">
<img class="setting-icons" src="..imgmoon.svg">
<a class="profile-parameters">
dark design
</a>
</div>
<div class="setting-buttons">
<img class="setting-icons" src="..imglogout.svg">
<a class="profile-parameters">
logout
</a>
</div>
</div>
</div>

这里是jsfiddle的完整html css和js代码
我有一个div元素，当你点击它时，函数(darkMode(会打开，并将css属性display: none;更改为display: block;，并添加sClassLists，我在css中添加了transition属性，但当显示更改时，transition不起作用。我想在不使用jquery的情况下进行转换，或者以某种方式添加js淡出效果。

Answer 1

在二级中添加visability: hidden;和visability: visible;