如何实现下拉弹出框渐渐弹出

直接上demo：

<div class="container showdiv fadediv">

  <ul>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

  </ul>

</div>

 

.container {

   overflow: hidden;/*必须用overflow,不然内容会挤出去，就算设置高度为零也没意义*/

}

 

.showdiv {

  height:300px;

  transition:height 0.8s ease 0s;

}

 

.fadediv {

  height:0;

  transition:height 0.8s ease 0s;

}

 

通过JS控制showdiv和fadediv这两个类来回切换，控制下拉弹出框的展开与收起