javascript - 从显示 :none to display:block? 向下滑动动画

Question

有没有一种方法可以使用 CSS 将 display:none 设置为 display:block 动画，以便隐藏的 div 向下滑动而不是突然出现，或者我应该采用不同的方式吗？

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

还有一个JSFiddle

Answer 1

是的，有一个方法: http://jsfiddle.net/6C42Q/12/

通过使用 CSS3 过渡和操纵高度，而不是显示属性:

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

更多信息:Slide down div on click Pure CSS?