單擊按鈕使Div矩形展開（高度）

Question

我有一個div

    <div class="dropdwn"></div>

我希望它是屏幕的整個寬度，並且矩形的底部以流暢的動畫擴展25個像素（向下）。

    .successDropdwn {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      color: green;
      -webkit-transition: max-height 0.8s;
      -moz-transition: max-height 0.8s;
      transition: max-height 0.8s;
   }

Answer 1

像這樣的東西？？？

 $('.dropdwn').slideDown('slow') 

 .dropdwn{ background-color:#dddddd; height:25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="dropdwn" style="display:none"></div> 

Answer 2

我不確定您到底想做什么，但這是通過使用jquery切換類來使用過渡的示例：

https://jsfiddle.net/gydg7j9m/5/

.dropdwn {
  background: firebrick;
  width: 100%;
  height: 50px;
  max-height: 0;
  overflow: hidden;
  color: green;
  transition: max-height 0.8s;
}

 .expand {
    max-height: 150px;
 }

jQuery的

$('#btn').on('click', function(){
$('.dropdwn').toggleClass('expand')
});