Question

我一直在手风琴中工作，但由于一些奇怪的原因，以下代码：

<style>
    .collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease;
    }
    .collapse.in {
    height: auto;
    }
</style>

<div class="accordion">
    <div class="something">
        <a class="" >Accordion Pane 1</a>
    </div>
    <div class="accordion-body collapse">
        <div class="accordion-inner"> content </div>
    </div>
</div>

<script>

$('.something').click(function(event){
    event.preventDefault();
    $(this).next('.accordion-body').toggleClass('in');

})


</script>

http://jsfiddle.net/CvdXK/

似乎不起作用。高度没有动画。我不知道为什么。

非常感谢。

Answer 1

我认为您需要设置一个特定的高度，而不是auto，以便在高度上进行转换。

.collapse {
    height: 0;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 1.35s ease;
    -moz-transition: height 1.35s ease;
    -o-transition: height 1.35s ease;
    transition: height 1.35s ease;
    background-color: #cecece;
}
.collapse.in {
    height: 200px; /*Set the height here*/
}

<强> Demo

或者max-height上的另一个选项转换，例如几乎不可能的最大高度。

.collapse {
    max-height:0px;
    position: relative;
    overflow: hidden;
    -webkit-transition: max-height 0.35s ease-in-out;
    -moz-transition: max-height 0.35s ease-in-out;
    -o-transition: max-height 0.35s ease-in-out;
    transition: max-height 0.35s ease-in-out;
    background-color: #cecece;
}
.collapse.in {
    max-height:1000px;
}

<强> Demo2

以下是this page的引用：

过渡渐变：并非每个CSS属性都可以转换，基本规则是您只能通过绝对值进行转换。例如，您无法在0px的高度与auto之间转换。浏览器无法计算中间转换值，因此属性更改是即时的。

Answer 2

你需要将尽可能多的CSS移动到JQuery来真正控制动画:(你animate-body内部animate-inner我认为你已经过了复杂的事情。

$(".something").click(function () {
    $("this").nextUntil('.accordion-inner').animate({
        duration: 350,
        specialEase: {
            height: "easeInBounce"
        }
    }, {
        duration: 350,
        specialEasing: {
            height: "easeOutBounce"
        }
    });
});

Answer 3

高度属性应该是强制定义的，以使平滑页面过渡到工作形式。甚至可能是0px。但不得为auto或max-height为0px。

为什么这个CSS3在高度上的过渡不起作用

3 个答案: