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

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 for transitionY()必须具有翻译值 translateY() = translateX( <translation-value> ),并且这个翻译-value必须"静态地"知道(所以如果你想要它是动态的,你必须使用Javascript.这是转换值 的文档http://www.w3.org/TR/css-transforms-1 /#SVG变换值