通过设置display属性none、block显示与隐藏,是没有任何动画效果的。还有就是能过height:0+overflow:hidden到height实现固定高度动画。实现任意高度元素的动画不妨试试max-height
<style>
.element{
max-height: 0;
overflow: hidden;
transition: max-height .2s;
}
:checked ~ .element{
max-height: 2000px; /*足够存放内容的高度*/
}
<style>
<input type="checkbox">
<div class="element"></div>