快捷導(dǎo)航

Vue2(三)實(shí)現(xiàn)子菜單展開(kāi)收縮，帶動(dòng)畫(huà)效果實(shí)現(xiàn)方法

更新時(shí)間：2019年04月28日 10:47:36 作者：飛天代碼

這篇文章主要介紹了vue實(shí)現(xiàn)收縮展開(kāi)效果的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

以前做這種操作就是簡(jiǎn)單的display：block，但現(xiàn)在用戶(hù)的要求也越來(lái)越高，需要美觀(guān)和動(dòng)畫(huà)感。

現(xiàn)在介紹用一種簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)子菜單從上向下展開(kāi)子菜單。

看下效果圖：

點(diǎn)開(kāi)效果：

其實(shí)原理比較簡(jiǎn)單，就是通過(guò)子菜單的 max-height: 0;和 max-height: 2000px來(lái)實(shí)現(xiàn)子菜單的顯示和關(guān)閉。加上css3的 transition: max-height .3s;來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。

子菜單的樣式：

 .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)鍵語(yǔ)句，子菜單的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
  }

然后通過(guò)點(diǎn)擊事件來(lái)實(shí)現(xiàn)子菜單的樣式open的切換，則就輕松實(shí)現(xiàn)了菜單的收縮和展開(kāi)了。

 $(".tree-son-menu").toggleClass('open');

以上所述是小編給大家介紹的vue實(shí)現(xiàn)收縮展開(kāi)詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

VUE實(shí)現(xiàn)吸底按鈕
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)吸底按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
ElementUI下拉框選擇后不顯示值問(wèn)題及解決
這篇文章主要介紹了ElementUI下拉框選擇后不顯示值問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
解決vuecli3.0熱更新失效的問(wèn)題
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
Vue組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了Vue小組件BootPage實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Element如何實(shí)現(xiàn)loading的方法示例
本文主要介紹了Element如何實(shí)現(xiàn)loading的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue日常開(kāi)發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫(kù)封裝
這篇文章主要為大家介紹了vue日常開(kāi)發(fā)基礎(chǔ)Axios網(wǎng)絡(luò)庫(kù)封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(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)在才拉出來(lái)記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下
2019-04-04
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下
2020-10-10
vue.js輪播圖組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue.js輪播圖組件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07