Javascript 如何在显示元素后平滑淡入/淡出：无值

我知道这里有许多关于堆栈溢出的问题与此类似，这些问题都是通过使用

visibility:hidden

而不是

display:none

属性来解决的。我的问题是，我认为我必须使用

display:none

，因为我需要用一个备用div填充隐藏的div的空间，

visibility:hidden

只会保留该空间，同时使其不可见

我的目标是：单击+按钮后，

nav

元素将正确淡出。在这个动画之后，我有一个JavaScript行，它计数500毫秒，然后给褪色的div一个包含

display:none

的类

问题是，当单击now-按钮时，我将元素返回其

display:block

属性，并删除赋予其模糊/淡入淡出效果的类但该元素不是很好的淡入淡出过渡，而是立即弹回到屏幕上。没有动画

我不知道如何在继续使用

display:none

属性的同时解决这个问题谢谢您的帮助，我不使用任何像jQuery这样的库，只使用普通的Javascript。

var expand=document.getElementById（“扩展”）；
函数removeElm（）{
“严格使用”；
document.querySelector（“nav”）.classList.add（“删除”）；
document.querySelector（“#description”）.classList.remove（“removed”）；
}
函数expandF（）{
“严格使用”；
var navLi=document.queryselectoral（“li”），i；
如果（！document.querySelector（“nav”）.classList.contains（“out”））{
document.querySelector（“nav”）.classList.add（“out”）；
document.querySelector（“body”）.style.background=“#dff”；
document.getElementById（“扩展”）.innerHTML=“-”；
document.getElementById（“扩展”）.style.background=“#f00”；
对于（i=0；i
/*//导航/////////////////////////////////*/
导航{
显示：内联块；位置：相对；顶部：50%；右侧：19px；
-webkit变换：translateY（-50%）；变换：translateY（-50%）；边距：自动
}
导航ul:after{content:：；display:block；clear:both}/*
var expand=document.getElementById（“扩展”）；
函数removeElm（）{
“严格使用”；
document.querySelector（“nav”）.classList.add（“删除”）；
document.querySelector（“#description”）.classList.remove（“removed”）；
}
函数expandF（）{
“严格使用”；
var navLi=document.queryselectoral（“li”），i；
如果（！document.querySelector（“nav”）.classList.contains（“out”））{
document.querySelector（“nav”）.classList.add（“out”）；
document.querySelector（“body”）.style.background=“#dff”；
document.getElementById（“扩展”）.innerHTML=“-”；
document.getElementById（“扩展”）.style.background=“#f00”；
对于（i=0；i
/*//导航/////////////////////////////////*/
导航{
显示：内联块；位置：相对；顶部：50%；右侧：19px；
-webkit变换：translateY（-50%）；变换：translateY（-50%）；边距：自动
}
导航ul:after{content:：；display:block；clear:both}/*
var expand=document.getElementById（“扩展”）；
函数removeElm（）{
“严格使用”；
document.querySelector（“nav”）.classList.add（“删除”）；
document.querySelector（“#description”）.classList.remove（“removed”）；
}
函数expandF（）{
“严格使用”；
var navLi=document.queryselectoral（“li”），i；
如果（！document.querySelector（“nav”）.classList.contains（“out”））{
document.querySelector（“nav”）.classList.add（“out”）；
document.querySelector（“body”）.style.background=“#dff”；
document.getElementById（“扩展”）.innerHTML=“-”；
document.getElementById（“扩展”）.style.background=“#f00”；
对于（i=0；i
/*//导航/////////////////////////////////*/
导航{
显示：内联块；位置：相对；顶部：50%；右侧：19px；
-网络工具包-
<div style="display: none; opacity: 0; transition: opacity 500ms"></div>

div.style.display = 'block';
div.clientHeight; // Forces the browser to "reflow"
div.style.opacity = 1; // Now the element will transition from opacity: 0 to opacity: 1