在前端開發中經常會用到一些動态圖标，比較常見的就是hamburger了，常見的導航菜單中隐藏時為一般用三條橫杠來表示有内容可以展開，當點擊該按鈕時，導航欄菜單顯示，菜單按鈕也變成了一個關閉的圖标，表示可以通過它來關閉菜單，點擊後關閉菜單并且圖标恢複成橫杠樣式，我們常把這種動态樣式稱之為Hamburger。

我們可以看到，采用動态變化有種動态過渡效果，視覺上會比較柔和，更利于用戶體驗。因此我在項目中經常會用到一些Hamburger樣式，可以實現很多種樣式，基本原理就是通過改變每個橫杠的角度、長度、透明度、位置來實現以下效果的，過度通過transition屬性來定義。

這裡定義了一個DIV，裡面定義一個span标簽來實現我們看到的橫杠，這裡我們将style屬性進行了動态綁定，這樣當我們切換類型的時候就可以直接跳到對應的樣式中了，統一用transition: 'all .3s'來實現過渡效果。

<template> <div> <div class="ham" > <span class="ham-line" v-for="(line, index) in hamLine" :key="index" :style="{ width: line.width, top: line.top, transform: line.transform, opacity: line.opacity, transition: 'all .3s' }"> </span> </div> <div> <span v-for="(item,index) in lineStyle" :key="index" @click="change(item)" class="list">{{index}}</span> </div> </div> </template>

這裡我把部分樣式嵌入到了DATA數據中了，所以我們這裡主要設置下通用樣式即可，這裡我們沒有把所有的樣式都寫進來，就示範了幾個，而且直接在同一個圖标上進行改變的。

<style lang="scss" scoped> .ham{ width: 50px; height: 50px; cursor: pointer; line-height: 0; margin: 30px auto; .ham-line{ position: relative; display: inline-block; vertical-align: top; width: 100%; height: 5px; margin-top: 10px; background-color: rgb(247, 239, 239); } } .list{ color:beige; padding:5px; cursor: pointer; &:first-child{ display: none; } } </style>

這裡我們沒有把所有的樣式都寫進來，就示範了幾個，第一條normalLine數據是正常的樣式，後面的style是變化後不同的樣式，每條數據中都指定了樣式width、top、transform、opacity屬性。

data(){ return{ lineStyle: { normalLine: [ { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' } ], style1: [ { width: '100%', top: '15px', transform: 'rotate(-45deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '0' }, { width: '100%', top: '-15px', transform: 'rotate(45deg)', opacity: '1' } ], style2: [ { width: '100%', top: '6px', transform: 'translateY(10px)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '0' }, { width: '100%', top: '-6px', transform: 'translateY(-10px)', opacity: '1' } ], style3: [ { width: '100%', top: '0', transform: 'translateX(-10px) rotate(-43deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0', transform: 'translateX(-10px) rotate(43deg)', opacity: '1' } ], style4: [ { width: '100%', top: '0', transform: 'translateX(10px) rotate(43deg)', opacity: '1' }, { width: '100%', top: '0px', transform: 'rotateZ(0deg)', opacity: '1' }, { width: '100%', top: '0', transform: 'translateX(10px) rotate(-43deg)', opacity: '1' } ] }, hamLine: [], mobileMenu: false } },

主要是對數據的切換，因為樣式我們已經寫在了數據中，所以當我們切換數據的時候就改變了當前狀态，在樣式改變時我們都賦予了過渡效果transition: 'all .3s'，這就得到了我們想要的Hamburger了。

created() { this.hamLine = this.lineStyle.normalLine }, methods:{ change(item){ this.mobileMenu = !this.mobileMenu this.hamLine=this.mobileMenu ? item:this.lineStyle.normalLine } }

該功能沒有難點，以上隻是提供了一種實現的思路，這個主要還是控制CSS樣式的，設置好DATA數據中的橫杠的樣式參數就可以了。

歡迎關注本人的公衆号：編程手劄

或者搜索公衆ProgramNotes，文章也會在公衆号更新

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!