vue如何實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單功能

小編給大家分享一下vue如何實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1.我曾經(jīng)聽一位快十年前端大佬說(shuō)過(guò)一句話,就是能用css實(shí)現(xiàn)的動(dòng)畫，就用css不要用js去實(shí)現(xiàn) 因?yàn)樵阡秩旧蟘ss肯定比js效果更好 

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

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

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

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

對(duì)應(yīng) vue中的 v-if   和 v-show  就可以算是觸發(fā)一種動(dòng)畫效果  從用戶角度來(lái)說(shuō)都是 上面?zhèn)z種情況都是從無(wú)到有的出現(xiàn)在界面上 

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

// 設(shè)置一個(gè)按鈕 通過(guò)v-show 控制元素的顯示隱藏

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

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

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

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

我這里用的是 animate.css動(dòng)畫庫(kù)

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">  //cdn

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

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

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

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

下面 我說(shuō)我的實(shí)際工作怎么解決的

我要實(shí)現(xiàn)一個(gè)鼠標(biāo)移過(guò)出現(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;    
 }

// 這里是鼠標(biāo)移動(dòng)過(guò)給show 賦值每一個(gè)遍歷li的下標(biāo)   離開賦值給-1 

// 童鞋們知道為啥賦值成-1嗎 因?yàn)橹拔屹x值給false 發(fā)現(xiàn)下標(biāo)是0的時(shí)候跟false是相等的  這個(gè)算是疏忽了 

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

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

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

                  <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實(shí)例 定義一個(gè)變量
    }
  })

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

以上是“vue如何實(shí)現(xiàn)鼠標(biāo)移過(guò)出現(xiàn)下拉二級(jí)菜單功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！