需要為一個列表添加個動畫，容器的高度是不確定的，也就是高度為 auto，懸浮時候撐開內容有個過渡動畫。

用 CSS3 實現的話，由於高度的不確定，而 transtion 是需要具體的樹枝，所以設置 height:auto 是無法實現效果的，可以通過 max-height 這個屬性間接的實現這麽個效果，css 樣式是這樣的：

<ul>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表內容<br>內容列表內容<br>內容列表內容<br
 
>內容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表內容<br>內容列表內容<br>內容列表內容<br>內容</div>
  </li>
  <li>
    <div class="hd"> 列表1 </div>
    <div class="bd">列表內容<br>內容列表內容<br>內容列表內容<
 
br>內容</div>
  </li>
</ul>

.bd {
  max-height:0;
  overflow:hidden;
  transition: all 1s ease-out;
}
li:hover .bd {
  max-height: 600px;
  transition-timing-function: ease-in;
}

實現鼠標懸浮內容自動撐開的過渡動畫