javascript CSS Transition - 平滑显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15979235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Transition - Show div smoothly
提问by William
Here's the idea: A div on top which is hidden by default and will slide down, pushing other content, by the click of a button. Another click will slide the div to be hidden again, raising the other content.
这是一个想法：顶部的 div 默认情况下是隐藏的，单击按钮会向下滑动，推动其他内容。再次单击将再次滑动要隐藏的 div，从而提升其他内容。
HTML
HTML
<div id="topDiv" class="hidden">
Some content<br>
More very complex content
</div>
<button id="thebutton" onclick="toggle('topDiv');">Toggle the div</button>
<div id="bottomDiv">
Some content<br>
More content!<br>
Even more content!<br>
</div>
CSS
CSS
div.hidden {
height: 0px;
}
div {
height: 400px;
transition: height 0.5s;
}
Javascript
Javascript
function toggle(someId) {
var someElem = document.getElementById(someId);
someElem.className = someElem.className == 'hidden' ? '' : 'hidden';
}
The issue here is that the content of the div that I want to be hidden is shown. If I alter div.hiddento have display: none;or visibility: hidden;then I lose the "sliding" effect.
这里的问题是显示了我想要隐藏的 div 的内容。如果我改变div.hidden为有display: none;或visibility: hidden;然后我失去了“滑动”效果。
I would like to have a solution that does not use jQuery.
我想要一个不使用 jQuery 的解决方案。
回答by Niels Keurentjes
Add overflow:hiddenon the div.
添加overflow:hidden在div上。
