CSS3过渡到高度auto首先到达高度0

Question

我有以下CSS:

.foo
{
    height:100px;
    overflow:hidden;
    -webkit-transition: height 200ms;
    -moz-transition: height 200ms;
    -o-transition: height 200ms;
    transition: height 200ms;
}

.foo.open
{
    height:auto;
}

当.foo有自动高度时,根据内容的不同,它的高度约为550px.

我open使用jQuery 添加类,我希望使用CSS3过渡在200ms内看到高度从100px变为~550px.

然而,究竟发生的是高度从100px变为0px,然后跳到~550px.

- 观看现场演示 -

如果我不是改.open到height:550px那么这个工作正常,但是内容的长度会有所不同,因此我需要将高度设置为自动,而不是一个固定的像素高度.

为什么div关闭而不是滑动到~550px,我该如何解决这个动画问题呢？

Answer 1

我不认为你可以过渡到height: auto;css过渡.一种不完美的解决方法是转换max-height,并将其设置为更大的东西.根据您设置的值会对转换速度产生影响,但max-height: 1000px;为了简单起见,我将其设置为.

这是一个演示,向您展示我的意思.

演示代码:

.foo
{
    max-height:100px;
    overflow:hidden;
    -webkit-transition: max-height 200ms;
    -moz-transition: max-height 200ms;
    -o-transition: max-height 200ms;
    transition: max-height 200ms;
}

.foo.open
{
    max-height:1000px;
}

这不是一个优雅的解决方案,但我希望它有所帮助.