Как сделать переход по высоте, не зная высоты раньше?

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>), и это перевод значения должно быть известно «статический» (так что если вы хотите динамическим , вы должны сделать это с Javascript. Вот документация перехода стоимостиhttp://www.w3.org/TR/css-transforms-1/#svg-transform-value

Answer 2

ответ вы не можете. есть два варианта, хотя. вы можете обмануть его с максимальной высотой. Попробуйте max-height: 0; и max-height: $some-amount-a-little-taller-then-you-want; Другой будет использовать некоторый javaScript. даже если вы сказали, что не хотите. Может быть, что-то вроде этого: 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; 
} 

Answer 3

К сожалению, вы не знаете height раньше. CSS не является сильным, чтобы делать свои утверждения в одиночку. Я думаю, вы вынуждены использовать JavaScript и/или JQuery.