Css转换在显示子内容时不能在父内容上工作

Question

<div id='element-with-transition'>
    <div class='child'>
       <div style='display:none'>Something here...</div>
       <div style='display:none'>Something here...</div>
       <div style='display:none'>Something here...</div>
    </div>
</div>
<style>
#element-with-transition{
        -webkit-transition: height 3s;
        transition: height 3s;   
}
</style>

当我将display:none更改为display:block时，显示内容，但未触发转换。我已经尝试改变过渡从高度到所有，但没有改变。我做对了吗?

Answer 1

不能通过transition将display:none;变为display:block;。如果你想动画高度，那么你必须使用height:0; overfloaw:hidden;作为初始状态，然后设置height:100px;(或任何期望的值)作为最终状态。