手寫一個頂部導航欄遇到的問題

前言

手寫一個頂部導航欄，最終效果如下：

鼠標移入菜單欄選項后，選項卡淡入動畫顯示，移出選項卡后淡出

實現思路

鼠標移入菜單選項后（:hover），將選項卡的opacity變為1 且加入動畫淡入效果（但會引出問題一 <元素仍占位>）

遇到的問題

1. 使用opacity控制選項卡顯示/隱藏，會出現占位情況
2. 使用display: none => block 控制選項卡顯示/隱藏，動畫消失
3. 鼠標經過間隙處，動畫提前消失
4. 鼠標移出不會觸發淡出動畫

解決流程

問題一：使用opacity控制選項卡顯示/隱藏，會出現占位情況

html

 <ul>
   <li>
     <a href="#">菜單一</a>
     <div class="select">
       <div class="select_item">
       	 <a href="">選項一</a>
       </div>
       <div class="select_item">
         <a href="">選項二</a>
       </div>
       <div class="select_item">
       	 <a href="">選項三</a>
       </div>
     </div>
   </li>
   <li>
     <a href="#">菜單二</a>
     <div class="select">
       <div class="select_item">
       	 <a href="">選項一</a>
       </div>
       <div class="select_item">
         <a href="">選項二</a>
       </div>
       <div class="select_item">
       	 <a href="">選項三</a>
       </div>
     </div>
   </li>
</ul>

css

ul {
  display: flex;
  margin-left: 70px;

  li {
    position: relative;
    margin-right: 40px;
    height: 22px;
    font-size: 18px;
    color: rgb(46, 51, 75);
    line-height: 30px;
    cursor: pointer;

    a {
      display: block;
      color: rgb(46, 51, 75);
      &:hover {
      color: rgb(0, 0, 0, 0.8);
      }
    }

    .select {
      opacity: 0;
      width: 250px;
      position: absolute;
      top: 25px;
      margin-top: 10px;
      background-color: #fff;
      z-index: 999999;
      padding: 12px;
      border-radius: 6px;
      font-size: 16px;
      
      .select_item {
        a {
        font-size: 16px;
        line-height: 28px;
        }
      }
    }

    &:hover .select {
      opacity: 1;
      transition: opacity 2s;
     }
   }
}

使用opacity控制選項卡顯示/隱藏時，元素會占位，所以導致了鼠標移入選項卡范圍內（如下圖區域），也會展示選項卡。

解決方法： 將opacity：0 => opacity: 1 變為 display: none => display: block即可。但是帶來了問題二。

問題二：使用display: none => block 控制選項卡顯示/隱藏，動畫消失

因為transition無法監聽display由none變為block，故無法實現動畫淡入效果

解決方法：

? 下載 Animate 插件，一個動畫插件，官網地址https://animate.style/，點擊右側選項即可展示動畫效果。

Animate.css插件的基本使用：

1. 下載

   npm install animate.css --save
   

2. 注冊引用插件

   vue項目將css引入到main.js, react項目將css引入到index.js。

   import 'animate.css'
   

3. 使用

   給需要動畫的元素添加對應動畫的類名即可，注意：不管使用哪個效果，都需要添加animate_animated這個類名。

   

? 此時發現頁面一渲染，動畫就自動觸發，只需定義一個變量，用來控制初始狀態/開/ 關，即可。

? 定義變量showoptions，0表示初始關閉狀態，1表示開啟（淡入），2表示關閉（淡 出）。修改后，代碼如下：

問題三：鼠標經過間隙處，動畫提前消失

鼠標經過如下區域，由于選項內容由定位實現，脫離了文檔流，所以監聽mousemove事件的li元素的區域僅僅是"菜單一"這個a標簽的區域，所以鼠標移經紅色區域fadeout觸發，導致用戶無法點擊選項。

解決方法：

? 給菜單一所在的這個元素一個padding-bottom，撐起內容（padding-bottom與選項內容的margin-top相等即可），從而擴大li（監聽mousemove事件的元素）的范圍。

問題四：鼠標移出不會觸發淡出動畫

按照如上寫法發現，鼠標移出后并不會觸發fadeout淡出動畫，是由于在：hover的一瞬間，display重新變成了none，所以看不到淡出動畫。

解決方法：

? 在觸發淡出時重新將display變為block即可。

此時雖然有淡出效果，但是移出后，display始終為block，只是插件將其隱藏，又出現了占位問題。

解決方法：

? 在一定時間后（動畫完畢）再次將display變為none。

? 不再需要css的：hover，刪除即可

? 定義變量isnone用于控制選項卡的顯示/隱藏，timer定時器

? 在鼠標移出時，開啟定時器，一秒后自動將display變為none

? 在鼠標移入時，清除定時器，display仍保持block

至此，已全部實現

最終代碼

html

 <ul>
   <li @mousemove="onMousemove" @mouseout="onMouseout">
     <a href="#">菜單一</a>
     <div
           :style="{ display: isnone }"
           :class="
                   showoptions == 0
                   ? 'select'
                   : showoptions == 1
                   ? 'select animate__animated animate__fadeIn'
                   : 'select animate__animated animate__fadeOut'
                  "
       >
       <div class="select_item">
       	 <a href="">選項一</a>
       </div>
       <div class="select_item">
         <a href="">選項二</a>
       </div>
       <div class="select_item">
       	 <a href="">選項三</a>
       </div>
     </div>
   </li>
   ...
</ul>

css

ul {
  display: flex;
  margin-left: 70px;

  li {
    position: relative;
    margin-right: 40px;
    padding-bottom: 10px;
    height: 22px;
    font-size: 18px;
    color: rgb(46, 51, 75);
    line-height: 30px;
    cursor: pointer;

    a {
      display: block;
      color: rgb(46, 51, 75);
      &:hover {
      color: rgb(0, 0, 0, 0.8);
      }
    }

    .select {
      display: none;
      width: 250px;
      height: auto;
      position: absolute;
      top: 25px;
      margin-top: 10px;
      background-color: #fff;
      z-index: 999999;
      padding: 12px;
      border-radius: 6px;
      font-size: 16px;
      
      .select_item {
        a {
          font-size: 16px;
          line-height: 28px;
        }
      }
    }
}

js

// 定義變量
showoptions: 0
isnone: "",
timer: null,

// 鼠標移入、移出事件
onMousemove() {
  this.showoptions = 1
  this.isnone = "block"
  clearTimeout(this.timer)
},
onMouseout() {
  this.showoptions = 2
  this.timer = setTimeout(() => {
    this.isnone = "none"
  }, 800)
},