Question

我想在CSS中进行高度转换，但我注意到我必须静态调整高度才能使其正常工作。

这是我的代码使用静态高度：

<!-- HTML --->
<div class="content show">
    <form method="post" action="">
        <label>Lastname
            <input type="text" name="lastname">
        </label>
        <label>Firstname
            <input type="text" name="firstname">
        </label>
    </form>
</div>

/* CSS */

.content{
    overflow:hidden;
}

.content.show{
    height:433px !important;       <<---------  //I would not define this height
    transition:0.5s;
    -webkit-transform:translateY(0);
}

.content.hidden{
    height:60px;
    transition:0.5s;
    -webkit-transform:translateY(0);
}

以下是我想要的自动高度代码：

<!-- HTML --->
<div class="content show">
    <form method="post" action="">
        <label>Lastname
            <input type="text" name="lastname">
        </label>
        <label>Firstname
            <input type="text" name="firstname">
        </label>
    </form>
</div>

/* CSS */

.content{
    overflow:hidden;
}

.content.show{
    height:auto !important;     <<<----------
    transition:0.5s;
    -webkit-transform:translateY(0);
}

.content.hidden{
    height:60px;
    transition:0.5s;
    -webkit-transform:translateY(0);
}

有人会知道如何运行此代码？我指定我不想使用javascript。

Answer 1

如果您的height在没有 CSS 知道的情况下进行更改，我担心这是不可能的。动画必须知道要使用的height。

以下是w3c的文档：对于必须具有翻译价值 translateY() = translateX( <translation-value> )的transitionY（）http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions，必须“静态”知道此翻译价值（所以如果你想要它是动态的，你必须使用 Javascript 来完成。这是 transition-value http://www.w3.org/TR/css-transforms-1/#svg-transform-value

的文档

Answer 2

答案是你不能。但有两种选择。你可以用最大高度欺骗它。试试max-height: 0;和max-height: $some-amount-a-little-taller-then-you-want;另一个是使用一些javaScript。即使你说你不想。也许是这样的：http://code-tricks.com/jquery-animate-to-auto-height/

.thing {
    border: 1px solid red;
    max-height: 1em;
    overflow: hidden;
    transition: all .5s linear;
}

.thing:hover {
    max-height: 30em;
}

Answer 3

不幸的是，您之前不知道height。 CSS并不是单独使用断言的强大功能。我认为你被迫使用JavaScript和/或Jquery。

如何在不知道高度之前进行高度过渡？

3 个答案: