vue實現(xiàn)鼠標移過出現(xiàn)下拉二級菜單功能

更新時間：2019年12月12日 09:55:09 作者：yunchong_zhao

這篇文章主要介紹了vue實現(xiàn)鼠標移過出現(xiàn)下拉二級菜單功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

1.我曾經(jīng)聽一位快十年前端大佬說過一句話,就是能用css實現(xiàn)的動畫，就用css不要用js去實現(xiàn) 因為在渲染上css肯定比js效果更好

我用jquery曾經(jīng)實現(xiàn)過鼠標點擊出現(xiàn)下拉菜單有點和面包屑和標簽頁導航類似后來參加工作了公司一直在用vue 所以很多用jqeury寫的項目都要用vue來重構這其中不免碰見了有一些動畫效果雖然很簡單

我也曾想著就用jquery去實現(xiàn)吧代碼多一點無所謂了但最后卻不是這樣 vue好像和jquery中的有些插件沖突了只要vue已導入那些用jquery實現(xiàn)的動畫就不能用但又不能不用vue 沒辦法這些效果只能用vue來實現(xiàn)了

vue官方提供了一種動畫效果是 transition 下面是vue官方的經(jīng)典例子

vue監(jiān)聽的元素一旦從dom樹發(fā)生類似刪除重新創(chuàng)建 =》 removeElement createElement display:block; display:none;

對應 vue中的 v-if 和 v-show 就可以算是觸發(fā)一種動畫效果從用戶角度來說都是上面?zhèn)z種情況都是從無到有的出現(xiàn)在界面上

.fade-enter-active, .fade-leave-active {   //定義元素 進入頁面時和離開頁面時的 效果
     transition: opacity .5s;    // 設置透明度默認是1 1是不透明 0是全透明 全透明相當于消失在頁面上 transition css3的過度效果
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    //設置元素進入 前和離開后都是純透明狀態(tài) 
 }

// 設置一個按鈕 通過v-show 控制元素的顯示隱藏

<div id="demo">
     <button v-on:click="show = !show">
      Toggle
     </button>

    <transition name="fade">   // <transition name="fade"></transition> 這個是必須的  
        <p v-if="show">hello</p>  //這里的name 和css樣式中的那個 fade也是一致的 讓p元素display block和node之間切換
     </transition>
 </div>

var app1=new Vue({
    el:'#app',//或者'#app'
    data:{
      show:false   //vue實例 定義一個變量
    }
  })

上面的這個例子算是 vue中經(jīng)典的例子了如果你不想寫樣式的話你可以結合第三方插件庫也可以快速實現(xiàn)vue中的動畫效果

我這里用的是 animate.css動畫庫

<link  rel="stylesheet" type="text/css">  //cdn

<div>
     <button @click="show = !show">
      點擊
     </button>
     <transition
      name="custom-classes-transition"                    //使用 animate.css 雖然只是寫個類名 但前面不要忘記寫
      enter-active-class="animated slideInDown"           //animated 再寫 你要運用的動畫名稱
      leave-active-class="animated slideInUp"
     >
      <p v-if="show">hello</p>
     </transition>
    </div>

vue實例和上面的一模一樣就不寫了下面我附上 animate.css的地址

https://daneden.github.io/animate.css/

3.其實吧在工作中你可能就實現(xiàn)一個小動畫好像沒必要引進那么大的animate插件庫我在工作中就用的方法1 除非你的項目要大量用到動畫并且需要不同的表現(xiàn)效果那還是推薦使用插件庫

下面我說我的實際工作怎么解決的

我要實現(xiàn)一個鼠標移過出現(xiàn)下拉菜單

.fade-enter-active, .fade-leave-active {   
     transition: opacity .5s;   
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    
 }

// 這里是鼠標移動過給show 賦值每一個遍歷li的下標離開賦值給-1

// 童鞋們知道為啥賦值成-1嗎因為之前我賦值給false 發(fā)現(xiàn)下標是0的時候跟false是相等的這個算是疏忽了

//這樣就實現(xiàn)了鼠標移動過不同的li會出現(xiàn)當前l(fā)i下的的下拉菜單動畫經(jīng)理也沒說非要拿嗎高級所以沒有在寫出什么復雜的動畫說實話本人實力暫時也不是很強哈哈這里的i和show 都是變量所以可以直接在@mouseover事件中使用很多童鞋可能忘記了這種用法只知道事件后面一定要綁定方法其實給變量賦值也是可以的

<li class="nLi" v-for="(v,i) of itemList" @mouseover="show=i" @mouseout="show=-1">

                  <h3><a href="">企業(yè)文化</a>|</h3>

                  <transition name="fade">

                    <div class="sub" v-show="show==i">

                        <ul>

                          <li><a href="">公司理念</a></li> 

                          <li><a href="">發(fā)展戰(zhàn)略</a></li>

                         <li><a href="">發(fā)展歷程</a></li>

                     </ul>

               </div>

        </transition>

  </li> 

var app1=new Vue({
    el:'#app',//或者'#app'
    data:{
      show:-1   //vue實例 定義一個變量
    }
  })

好了這個算是今天的一個小收獲到此結束我會持續(xù)更新把碰見的問題共享出來讓很多童鞋少走彎路本人一直在向大牛的路上努力前進著

總結

以上所述是小編給大家介紹的vue實現(xiàn)鼠標移過出現(xiàn)下拉二級菜單，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: