[英]CSS Transition - Show div smoothly
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. 这是一个想法:顶部的div默认情况下是隐藏的,单击按钮将向下滑动, 推动其他内容 。 Another click will slide the div to be hidden again, raising the other content. 再次单击将滑动div以再次隐藏,从而引发其他内容。
<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>
div.hidden {
height: 0px;
}
div {
height: 400px;
transition: height 0.5s;
}
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. 这里的问题是显示了我要隐藏的div的内容。 If I alter div.hidden
to have display: none;
如果我将div.hidden
更改为display: none;
or visibility: hidden;
或visibility: hidden;
then I lose the "sliding" effect. 然后我失去了“滑动”效果。
I would like to have a solution that does not use jQuery. 我想要一个不使用jQuery的解决方案。
添加overflow:hidden
在div上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.