快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

// 設(shè)置一個(gè)按鈕 通過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é)合第三方插件庫也可以快速實(shí)現(xiàn)vue中的動畫效果

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

<link  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)用的動畫名稱
      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è)小動畫好像沒必要引進(jìn)那么大的animate插件庫我在工作中就用的方法1 除非你的項(xiàng)目要大量用到動畫并且需要不同的表現(xiàn)效果那還是推薦使用插件庫

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

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

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

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

總結(jié)

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

您可能感興趣的文章: