CSS过渡 - 顺利显示div

Question

这是一个想法:顶部的div默认隐藏,只需按一下按钮就会向下滑动,推送其他内容.再次单击将滑动div再次隐藏,引发其他内容.

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

div.hidden {
    height: 0px;
}
div {
    height: 400px;
    transition: height 0.5s;
}

使用Javascript

function toggle(someId) {
    var someElem = document.getElementById(someId);
    someElem.className = someElem.className == 'hidden' ? '' : 'hidden';
}

这里的问题是显示我想要隐藏的div的内容.如果我改变了div.hidden,display: none;或者visibility: hidden;我失去了"滑动"效果.

我想有一个不使用jQuery的解决方案.

Answer 1

加上overflow:hiddendiv.