从显示向下滑动动画：无显示：阻止？ [英] Slide down animation from display:none to display:block?

问题描述

有一种方法来显示动画：无显示：block使用CSS，使隐藏的div滑下来，而不是突然出现，或者我应该用不同的方式吗？

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?

HTML：

<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

CSS：

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

这里是我的脚本：

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

并且 JSFiddle

And a JSFiddle

推荐答案

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

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

By using CSS3 transitions, and manipulate height, rather than display property:

.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;
}

更多此处：向下滑动div点击Pure CSS？

这篇关于从显示向下滑动动画：无显示：阻止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！