CSS3过渡到高度自动首先到高度0

我有以下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毫秒内看到高度从100px变为~550px。

然而，实际情况是高度从100px变为0px，然后跳到~550px。

—参见Live Demo—

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

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

我不认为你可以用css过渡到height: auto;。一个不完美的解决方案是将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;
}

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

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

在点击按钮时，计算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/

这仍然很粗糙，所以如果有一个更优雅的解决方案，那么我愿意接受建议

不能使用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; 
}

这里有一个小bug，我已经修复了。

.foo {
min-height: 100px;
height: 100px;
...
}

这里你不会看到它回到0px

相关内容

最新更新

热门标签：