我知道 Stack Overflow 上有许多与此类似的问题，这些问题都可以通过使用 visibility:hidden 而不是 display:none 属性来解决。我遇到的问题是我认为我必须使用 display:none 因为我需要用备用 div 填充隐藏的 div 的空间，visibility:hidden 只会保留那个空间，同时使其不可见。
我的目标:单击+按钮后，nav元素正确淡出。在此动画之后，我有一个 JavaScript 行计算 500 毫秒，然后为褪色的 div 提供一个包含 display:none 的类。
问题是，当单击现在的 - 按钮时，我将元素返回其 display:block 属性，并删除为其提供模糊/淡入淡出效果的类影响。 但是该元素并没有很好的淡入/淡入过渡，而是立即弹回到屏幕上。无动画。
在继续使用 display:none 属性的同时，我不知道如何解决这个问题。 感谢您的帮助，我没有使用任何像 jQuery 这样的库，只是简单的 Javascript。
var expand = document.getElementById("expansion");
function removeElm() {
"use strict";
document.querySelector("nav").classList.add("removed");
document.querySelector("#description").classList.remove("removed");
}
function expandF() {
"use strict";
var navLi = document.querySelectorAll("li"), i;
if (!document.querySelector("nav").classList.contains("out")) {
document.querySelector("nav").classList.add("out");
document.querySelector("body").style.background = "#dff";
document.getElementById("expansion").innerHTML = "-";
document.getElementById("expansion").style.background = "#f00";
for (i = 0; i < navLi.length; i++) {
navLi[i].classList.add("rsHover");
}
setTimeout(removeElm, 500);
} else {
document.querySelector("nav").classList.remove("removed");
document.querySelector("#description").classList.add("removed");
document.querySelector("nav").classList.remove("out");
document.querySelector("body").style.background = "#fff";
document.getElementById("expansion").innerHTML = "+";
document.getElementById("expansion").style.background = "#222";
for (i = 0; i < navLi.length; i++) {
navLi[i].classList.remove("rsHover");
}
}
}
expand.addEventListener("click", expandF);/*///////////////////////////////// __NAV__ /////////////////////////////////*/
nav {
display: inline-block; position: relative; top: 50%; right: 19px;
-webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto
}
nav ul:after { content: ""; display: block; clear: both } /* << clearfix */
nav ul { font-size: 100%; text-transform: uppercase; margin: 0; padding: 0 }
nav li { width: 150px; height: 150px; list-style: none; float: left; margin: 5px}
nav li:hover { background: #055; color: #eee; cursor:pointer }
nav span {
display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
/*///////////////////////////////// SECTION /////////////////////////////////*/
#description {
display: inline-block; position: relative; top: 50%; right: 19px;
-webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto
}
/*///////////////////////////////// _MISC__ /////////////////////////////////*/
.removed { display: none !important }
.rsHover:hover { background: #dff }
.out {
-webkit-filter: blur(60px); filter: blur(60px); color: #fff;
-webkit-transform: scale(0.1, 0.9); transform: scale(0.1, 0.9);
-webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 110%;
}
/*///////////////////////////////// _ANIM__ /////////////////////////////////*/
body{ -webkit-transition:2s ease; transition:2s ease }
nav{
-webkit-transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease;
transition:color 1s ease, -webkit-filter 1s ease, -webkit-transform 1s ease;
transition:filter 1s ease, color 1s ease, transform 1s ease;
transition:filter 1s ease, color 1s ease, transform 1s ease, -webkit-filter 1s ease,
-webkit-transform 1s ease;
}<head>
<style>
html,body { height: 100%; text-align: center; color: #222; margin: 0 }
#expansion {
float:left; position: relative; top: 50%; -webkit-transform: translateY(-50%);
transform: translateY(-50%); width: 28px; height: 28px; padding: 5px;
margin: auto; color: #666; font-size: 150%
}
#expansion:hover { background: #222; color: #eee; cursor:pointer; }
</style>
</head>
<body>
<div id="expansion">+</div>
<nav>
<ul>
<li><span>one</span>
</li>
<li><span>two</span>
</li>
</ul>
</nav>
<section id="description" class="removed">
<h1>about web</h1>
<p>
WEB is a reference of...
</p>
</section>
</body>最佳答案
您需要在设置 display: block 后强制浏览器渲染该元素，以确保该元素位于文档流中，否则它将不会执行任何转换或动画。使用回流焊:
您的元素当前处于隐藏(显示:无)状态:
<div style="display: none; opacity: 0; transition: opacity 500ms"></div>
JS 使其流畅，然后转换为不透明度:1:
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
其中 div 是 HTMLElement 对象。请注意，opacity 只是一个示例。
我强烈建议您阅读本文以了解更多信息(因为这是一个非常复杂的主题):http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
编辑:将currentHeight更改为clientHeight。
关于javascript - 如何在显示元素后平滑地淡入/淡出:none value，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36854093/