1. 程式人生 > >下拉列表的過渡效果

下拉列表的過渡效果

控制 結構 ansi 效果 部分 進行 下拉 結合 設置

一些場合我們可能需要一些類似於如下下拉過渡的效果

技術分享圖片

實現方法這裏總結兩種

html結構

技術分享圖片

必須是這種結構,思路就是通過控制第二個盒子(在這兒是ul)的高度,實現上拉,下拉的效果,這兒只需要將<ul>設置為overflow: hidden; 再結合css3過渡就可以實現

方法1:當ul有固定高度,這時可以為ul添加class,然後再結合transition實現過渡

技術分享圖片
這是關鍵的css代碼
技術分享圖片
這是通過classLst.toggle實現切換類的目的,這樣就達到了我們的目的(註意:ul必須為固定高度,將ul的高度設置為height: 100%是無法實現過渡的)

方法2:當ul沒有固定高度,這時就必須通過js進行實現;

技術分享圖片
這兒是css代碼
技術分享圖片
這兒是js代碼,框起來的紅色部分,是為了讓ul的高度可計算,如果沒有這一句的話,那麽首次過渡,ul會瞬間變成0,而無法實現過渡。

下拉列表的過渡效果