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

user_1863318 0
Viewed 319

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.

transition css-transitions css html
3 Answers

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

user_15507520

The answer is you can't. There are two options though. You can trick it with max height. Try max-height: 0; and max-height: $some-amount-a-little-taller-then-you-want; The other would be to use some javaScript. even though you said you didn't want to. Maybe something like this: 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;
}
user_13994560

Unfortunately, you do not know the height before. CSS is not powerful to make his assertions alone. I think you're forced to use JavaScript and / or Jquery.

user_29364130
Related