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，具体取决于内容。

我使用jQuery添加了类open，我期望看到使用CSS3过渡在200ms内高度从100px变为~550px。

但究竟发生的是高度从100px变为0px，然后跳到~550px。

-- See Live Demo --

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

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

Answer 1

我认为您不能使用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;
}

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

Answer 2

无法使用高度转换：auto。最大高度的技巧是一个非常好的解决方案，但有一些不便，特别是如果最大高度远高于实际高度，则会出现奇怪的延迟。

以下是我使用的技巧：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; 
}

Answer 3

那里有一个小虫子，我已经修好了。通过添加min-height：100px;

.foo {

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

}

在那里你不会看到它回到0px。

Answer 4

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

单击该按钮，通过执行以下操作计算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，所以如果有一个更优雅的解决方案，那么我愿意接受建议

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

4 个答案: