html - CSS SlideIn animation without setting height -

i'm wanting replicate jquery slidein , slideout, css.

ul {     background-color:yellow;   transform-origin: top;   transition: transform .5s; }  .slider {   transform: scaley(0); } 

the .slider class force ul element resize. method not account height. want height resize 0 button in example, move up.

here jsbin: http://jsbin.com/zoqiciwicu/1/edit

is possible through css? not have set height use.

since height of element vary, 1 possible option set max-height property instead high value , use transition in order achieve animation:

updated example

ul {     background-color:yellow;   transform-origin: top;   transition: .5s ease-in-out;   max-height: 50em; }  .slider {   transform: scaley(0);   max-height: 0; } 

preview:

$('input').click(function(){         $('ul').toggleclass("slider");   });

ul {      background-color:yellow;    transform-origin: top;    transition: .5s ease-in-out;    max-height: 50em;  }    .slider {    transform: scaley(0);    max-height: 0;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul>    <li>test</li>    <li>test</li>    <li>test</li>    <li>test</li>    <li>test</li>    <li>test</li>    <li>test</li>    <li>test</li>  </ul>      <input type="button" value="slide">