CSS3 过渡到高度自动首先转到高度 0答案

【问题标题】：CSS3 transition to height auto goes to height 0 firstCSS3 过渡到高度自动首先转到高度 0
【发布时间】：2013-04-02 01:43:15
【问题描述】：

我有以下 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 具有自动高度时，根据内容的不同，高度约为 550 像素。

我使用 jQuery 添加了 open 类，我希望使用 CSS3 过渡在 200 毫秒内看到高度从 100 像素变为 ~550 像素。

然而究竟发生了什么是高度从 100px 变为 0px，然后跳到 ~550px。

-- See Live Demo --

如果我改为将.open 更改为height:550px，则此works fine，但是内容长度会有所不同，因此我需要将高度设置为自动，而不是固定的像素高度。

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

【问题讨论】：

CSS transition height: 0; to height: auto;的可能重复

标签： css height css-transitions

【解决方案1】：

那里有一个小错误，我已经修复了。通过添加 min-height: 100px;

.foo {

min-height: 100px;
height: 100px;
...

}

你不会看到它回到 0px。

【讨论】：

感谢您的回复，但这会阻止过渡动画：jsfiddle.net/AbPEx/2

【解决方案2】：

这不是最优雅的解决方案，但它解决了自动高度问题。

点击按钮后，通过执行以下操作计算 div 的高度和自动高度：

var openHeight = $foo.addClass("heightauto").height();

然后直接删除这个类，并为openHeight的div应用一个高度：

$foo.removeClass("heightauto");
$foo.height(openHeight);

heightauto 类还需要覆盖 CSS3 过渡，以便立即更改高度：

.foo.heightauto
{
    height:auto;
    -webkit-transition:0;
    -moz-transition:0;
    -o-transition:0;
    transition:0;
}

观看现场演示：http://jsfiddle.net/AbPEx/4/

虽然这仍然是 hacky，所以如果有更优雅的解决方案，我愿意接受建议

【讨论】：

【解决方案3】：

我认为您不能使用 css 转换转换到 height: auto;。一种不完美的解决方法是转换 max-height 并将其设置为更大的值，然后才能获得。根据您设置的值会对转换速度产生影响，但为了简单起见，我将其设置为 max-height: 1000px;。

这是一个demo 向您展示我的意思。

演示代码：

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

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

【讨论】：

感谢您的回复，这并不完美，因为 min-height 需要始终与自动高度相似。否则过渡速度会有所不同。但这仍然比我的解决方案好。你有什么关于为什么我们不能从固定高度到自动转换的参考吗？
不，不是真的，但我在谷歌上搜索了这个问题，我发现这篇博文有一个简短的解释 - blog.alexmaccaw.com/css-transitions

【解决方案4】：

不能使用带有 height:auto 的过渡。使用 max-height 的技巧是一个很好的解决方案，但有一些不便，尤其是如果 max-height 远高于实际高度时会出现奇怪的延迟。

这是我使用的技巧：http://jsfiddle.net/g56jwux4/2/ 基本上它是两个向相反方向平移的叠瓦状 DIV。看看 jsfiddle 上的代码，因为我的英文不好解释清楚。

HTML 部分：

<body>
  <p>Technicaly this dropdown menu looks like a simple height transition.</p>
  <p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p>
    <input type="checkbox" id="menuOpen"></input>
    <label id="bouton" for="menuOpen"><span>Click on me !</span>
        <div id="menu">
            <div id="masque">
                <div class="choix" id="choix1">Choix 1</div>
                <div class="choix" id="choix2">Choix 2</div>
                <div class="choix" id="choix3">Choix 3 tr&egrave;s tr&egrave;s long pour voir la taille finale du menu</div>
                <div class="choix" id="choix4">Choix 4</div>
                <div class="choix" id="choix5">Choix 5</div>
                <div class="choix" id="choix6">Choix 6</div>
            </div>
        </div>
    </label>
</body>

CSS 部分：

body {
    font-family: sans-serif;
}
#menuOpen {
    display: none;
}
#bouton {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 30px;
    background-color: lightgray;
    cursor: pointer;
}
#bouton > span {
    color: black;
    padding: 6px;
    line-height: 30px;
}
#menu {
    position: absolute;
    top: 100%;
    overflow: hidden;
    min-width: 100%;
    transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
    transform: translateY(-100%);
    visibility: hidden;
    color: white;
}
#menuOpen:checked + #bouton > #menu  {
    transform: translateY(0%);
    visibility: visible;
    transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
    transform: translateY(0%);
}
#masque {
    position: relative;
    background-color: gray;
    transform: translateY(100%);
    transition: transform 0.3s linear 0s;
}
.choix {
    white-space: nowrap;
    padding: 3px 6px;
}
.choix:hover {
    background-color: darkgray; 
}

【讨论】：