html - 如何在不知道高度的情况下进行高度过渡？

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-functions对于必须有一个翻译值的transitionY() translateY() = translateX( <translation-value> ) ，并且这个translation-value 必须是“静态”已知的(因此，如果您希望它是动态的，则必须使用 Javascript 来实现。这是 的文档>过渡值 http://www.w3.org/TR/css-transforms-1/#svg-transform-value