如何在之前不知道高度的情况下进行高度转换

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的文档：http://www.w3.org/TR/css-transforms-1/#two-d-transform-transitionY（）的函数，该函数必须具有转换值translateY() = translateX( <translation-value> )，并且该翻译值必须是"静态"已知的（因此，如果您希望它是动态的，则必须使用Javascripthttp://www.w3.org/TR/css-transforms-1/#svg-转换值

Answer 2

很遗憾，您以前不知道height。CSS并不足以单独做出他的断言。我认为您不得不使用JavaScript和/或Jquery。

Answer 3

答案是你做不到。不过有两种选择。你可以用最大高度来欺骗它。尝试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;
}