Vue2(三)實(shí)現(xiàn)子菜單展開收縮，帶動(dòng)畫效果實(shí)現(xiàn)方法
以前做這種操作就是簡(jiǎn)單的display：block，但現(xiàn)在用戶的要求也越來越高，需要美觀和動(dòng)畫感。
現(xiàn)在介紹用一種簡(jiǎn)單的方式來實(shí)現(xiàn)子菜單從上向下展開子菜單。
看下效果圖：
點(diǎn)開效果：
其實(shí)原理比較簡(jiǎn)單，就是通過子菜單的 max-height: 0;和 max-height: 2000px來實(shí)現(xiàn)子菜單的顯示和關(guān)閉。加上css3的 transition: max-height .3s;來實(shí)現(xiàn)動(dòng)畫效果。
子菜單的樣式：
.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默認(rèn)樣式
max-height: 0; -webkit-transition: max-height .3s; transition: max-height .3s;
當(dāng)子菜單追加open樣式后，子菜單的body樣式：
&.open .menu-body {
max-height: 600px;
-webkit-transition: max-height .5s;
transition: max-height .5s
}
然后通過點(diǎn)擊事件來實(shí)現(xiàn)子菜單的樣式open的切換，則就輕松實(shí)現(xiàn)了菜單的收縮和展開了。
$(".tree-son-menu").toggleClass('open');
以上所述是小編給大家介紹的vue實(shí)現(xiàn)收縮展開詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)吸底按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了ElementUI下拉框選擇后不顯示值問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁功能
這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Element如何實(shí)現(xiàn)loading的方法示例
本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝
這篇文章主要為大家介紹了vue日常開發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue項(xiàng)目從webpack3.x升級(jí)webpack4不完全指南
前段時(shí)間，泡面將自己的一個(gè)Vue-cli構(gòu)建的前端框架從webpack3.x升級(jí)到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue.js輪播圖組件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07