javascript - 显示子内容时，CSS过渡在父项上不起作用

This question already has answers here:

Transitions on the CSS display property
                                
                                    （32个答案）
                                
                        
                                5年前关闭。
            
                    

<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时，将显示内容，但不会触发过渡。我已经尝试过将高度转换为全部，但是没有任何变化。我做得对吗？

最佳答案

您不能通过过渡将display:none;更改为display:block;。如果要设置高度的动画，则必须将height:0; overfloaw:hidden;用于初始状态，然后将height:100px;（或任何所需的值）设置为最终状态。

关于javascript - 显示子内容时，CSS过渡在父项上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24031596/