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

我想在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);
}

姓氏
名字
/*CSS*/
.内容{
溢出：隐藏；
}
.content.show{
高度：433px！重要；如果您的
height
在您的CSS不知道的情况下更改，恐怕这是不可能的。动画必须知道
高度才能使用

以下是w3c的文档：
对于transitionY（），它必须有一个转换值
translateY（）=translateX（）
，并且该转换值必须“静态”已知（因此，如果你想让它动态，你必须使用Javascript。下面是转换值的文档答案是你不能。但是有两个选项。你可以用最大高度来欺骗它。试试
max height:0；
和
max height:$some-amount-a-littler-than-you-want；
另一个是使用一些javaScript。即使你说你不想这样做。可能是这样的：

不幸的是，您以前不知道
高度
。CSS无法单独做出断言。我认为您被迫使用JavaScript和/或Jquery。
那么什么会触发动画呢？我所知道的最好方法是将转换设置为“最大高度”，并将“高度”设置为“自动”；但这还远远不够perfect@sheriffderek我有一张表格它出现在带有关闭按钮的页面上。当您单击按钮时，应使用高度转换隐藏表单，并允许仅显示表单的标题。因此，如果您不想使用javaScript，那么您打算如何从按钮触发它？
.thing {
    border: 1px solid red;
    max-height: 1em;
    overflow: hidden;
    transition: all .5s linear;
}

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