为什么此CSS3高度转换不起作用 [英] Why this CSS3 transition on height does not work

问题描述

我一直在手风琴上工作，但是出于某些奇怪的原因，以下代码:

I have been working in an accordion, but for some odd reason the following code:

<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/

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

doesn't seem to work. The height doesn't animate. And i dont know why.

非常感谢.

推荐答案

我认为您需要设置特定的高度而不是auto，以使高度发生转变.

I think you need to set a specific height instead of auto for the transition to happen on height.

.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上进行另一个选项转换，例如几乎不可能实现的max-height.

Or another option transition on max-height, like a max-height that is near impossible.

.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

Demo2

以下是此页面中的引文:

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

Transitioning gradients: Not every CSS property can be transitioned, and the basic rule is that you can only transition through absolute values. For example, you can’t transition between a height of 0px to auto. The browser can’t calculate the intermediate transition values, so the property change is instant.

这篇关于为什么此CSS3高度转换不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！