5

我有以下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 过渡在 200 毫秒内看到高度从 100 像素变为 ~550 像素。

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

-- 观看现场演示 --

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

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

4

4 回答 4

9

我不认为你可以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;
}

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

于 2013-04-10T11:40:03.877 回答
1

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

单击按钮时，通过执行以下操作计算 div 将具有自动高度的高度：

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

然后直接删除这个类，并将高度应用于 div openHeight：

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

不过，这仍然很老套，所以如果有更优雅的解决方案，那么我愿意接受建议

于 2013-04-10T10:32:16.487 回答
1

不能使用带有 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; 
}
于 2015-02-06T20:10:52.477 回答
0

里面有个小bug，我已经修复了。通过添加最小高度：100px；

.foo {

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

}

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

于 2013-04-10T09:48:06.050 回答