重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
Vue2(三)實現子菜單展開收縮，帶動畫效果實現方法
以前做這種操作就是簡單的display：block，但現在用戶的要求也越來越高，需要美觀和動畫感。
創新互聯是一家專注于成都做網站、網站設計與策劃設計,鳳翔網站建設哪家好?創新互聯做網站,專注于網站建設十載,網設計領域的專業建站公司;建站業務涵蓋:鳳翔等地區。鳳翔做網站價格咨詢:18982081108
現在介紹用一種簡單的方式來實現子菜單從上向下展開子菜單。
看下效果圖：
點開效果：
其實原理比較簡單，就是通過子菜單的 max-height: 0;和 max-height: 2000px來實現子菜單的顯示和關閉。加上css3的 transition: max-height .3s;來實現動畫效果。
子菜單的樣式：
.tree-son-menu{
background-color: #FFF;
.menu-body {
z-index: 20;
position: relative;
color: #5f5f5f;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height .3s;
transition: max-height .3s;
}
&.open .menu-body {
max-height: 600px;
-webkit-transition: max-height .5s;
transition: max-height .5s
}
&.two-level{
.row-item{
.row-left{
padding-left: .8rem;
}
}
}
}
關鍵語句，子菜單的body默認樣式
max-height: 0; -webkit-transition: max-height .3s; transition: max-height .3s;
當子菜單追加open樣式后，子菜單的body樣式：
&.open .menu-body {
max-height: 600px;
-webkit-transition: max-height .5s;
transition: max-height .5s
}然后通過點擊事件來實現子菜單的樣式open的切換，則就輕松實現了菜單的收縮和展開了。
$(".tree-son-menu").toggleClass('open');以上所述是小編給大家介紹的vue實現收縮展開詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！
當前文章：Vue2(三)實現子菜單展開收縮，帶動畫效果實現方法
地址分享：http://www.xueling.net.cn/article/jidooo.html