Vue2(三)實現(xiàn)子菜單展開收縮，帶動畫效果實現(xiàn)方法
更新時間：2019年04月28日 10:47:36 作者：飛天代碼
這篇文章主要介紹了vue實現(xiàn)收縮展開效果的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
以前做這種操作就是簡單的display：block，但現(xiàn)在用戶的要求也越來越高，需要美觀和動畫感。
現(xiàn)在介紹用一種簡單的方式來實現(xiàn)子菜單從上向下展開子菜單。
看下效果圖：
點開效果：
其實原理比較簡單，就是通過子菜單的 max-height: 0;和 max-height: 2000px來實現(xiàn)子菜單的顯示和關(guān)閉。加上css3的 transition: max-height .3s;來實現(xiàn)動畫效果。
子菜單的樣式：
.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;
}
}
}
}
關(guān)鍵語句，子菜單的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
}
然后通過點擊事件來實現(xiàn)子菜單的樣式open的切換，則就輕松實現(xiàn)了菜單的收縮和展開了。
$(".tree-son-menu").toggleClass('open');
以上所述是小編給大家介紹的vue實現(xiàn)收縮展開詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
element-ui中el-cascader動態(tài)加載和默認值詳解
vue+elementUI項目中el-cascader級聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動態(tài)加載和默認值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue組件實現(xiàn)可搜索下拉框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
在本篇文章里，小編給大家分享的是關(guān)于Vue關(guān)于組件化開發(fā)知識點詳解內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2020-05-05
本篇文章主要介紹了Vue之前端體系與前后端分離，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
Ant Design Vue全局對話確認框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對話確認框(confirm)的回調(diào)不觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果
這篇文章主要為大家詳細介紹了vuedraggable+element ui實現(xiàn)頁面控件拖拽排序效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了vue遠程加載sfc組件思路詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue中使用iframe嵌入網(wǎng)頁,頁面可自適應(yīng)問題
這篇文章主要介紹了vue中使用iframe嵌入網(wǎng)頁,頁面可自適應(yīng)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element el-table 表格限制多選個數(shù)功能
這篇文章主要介紹了element el-table 表格限制多選個數(shù)功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。接下來通過本文給大家分享Mint UI 基于 Vue.js 移動端組件庫，需要的朋友參考下吧2017-11-11