How to make a transition in height without knowing the height before?

Question

I want to make a transition of height in CSS, but I noticed that I have to adjust the height statically so that it works.

Here is my code working with static height:

<!-- 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);
}

Here is the code I want to be with an automatic height:

<!-- 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);
}

Someone would have an idea how to run this code? I specify that I do not want to use javascript.

Answer 1

If your height changes without your CSS knowing it, I am afraid that it is impossible. The animation has to know the height to use.

Here is the documentation of w3c : http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions for the transitionY() which has to have a translation-value translateY() = translateX( <translation-value> ), and this translation-value must be known "statically" (so if you want it dynamic, you have to do it with Javascript. Here is the documentation of the transition-value http://www.w3.org/TR/css-transforms-1/#svg-transform-value