显示子内容时，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

您无法通过转换将display:none;更改为display:block;。如果你想为高度设置动画，那么你必须使用height:0; overfloaw:hidden;作为初始状态，然后为最终状态设置height:100px;（或任何所需的值）。