6個CSS hamburger動畫，

6個CSS hamburger動畫，

我用了CSS和一點JavaScript來示範如何產生”漢堡包”動畫。

在前面的文章中，我把我對導覽列菜單（也被成為”漢堡包表徵圖”）的動畫靈感發布出來。結果收到了不少粉絲的稱讚，我先謝謝你們了。

我決定在這方面下多點功夫，於是我寫了一系列不同的動畫實現方式。在這片文章中，你將會看到6個不同”漢堡包”動畫的增強版。

我使用了一點JavaScript來觸發動畫，在繼續研究下去之前，你可以先看看Demo （譯者:如果打不開，請點擊文章最下面的Demo）

變化

我之前寫的代碼不算太整潔，改變主要目的是讓代碼更加整潔有序。

首先，我用button元素替換掉了無語意的div。這樣代碼更具有易讀性。

然後我把wrapper的類名命名為.hamburger,在.hamburger裡面，我有另外一個元素（一個span標籤），我把它的類名定位.icon

精華

我們的.icon元素是被包裹起來構成一個完整的表徵圖。

為了讓我們的動畫更加平滑，中間的欄需要足夠的靈活，因此，.icon元素就用來充當漢堡包的肉餅部分。

至於表徵圖包裹部分，.hamburger不僅僅是充當wrapper的角色，它也用協助完成整個動畫。所以漢堡包的上下兩塊麵包的部分就由.hamburger的偽類來填充。

HTML

<button class="hamburger hamburger-cancel">  <span class="icon"></span></button>

正如你所看到的，button元素擔任.hamburger角色。另外一個類名（.hamburger-cancel）是用來區分究竟是什麼漢堡（板燒雞腿還是巨無霸什麼的）。我們這裡有6中不同口味的漢堡。

JavaScript

正如一開始我說的，我們使用一小段JS代碼來做切換，下面是My Code片段

var el = document.querySelectorAll('.hamburger');for(i=0; i<=el.length; i++) {  el[i].addEventListener('click', function() {    this.classList.toggle('active');  }, false);}

上面的JavaScript主要是通過綁定點擊時間，把.active類添加到對應元素上。

代碼

下面的CSS代碼設定了我們hamburger元素的預設狀態。你可以適當調整font-size，當然font-size最大值不能超出我們的表徵圖

除了結構規範，我們也用了CSS transition 屬性來讓動畫更加平滑。

.hamburger {  font-size: 60px;  display: inline-block;  width: 1em;  height: 1em;  padding: 0;  cursor: pointer;  transition: transform .2s ease-in-out;  vertical-align: middle;  border: 0 none;  background: transparent;}/** * Button height fix for Firefox */.hamburger::-moz-focus-inner {  padding: 0;  border: 0 none;}/** * Focus fix for Chrome */.hamburger:focus {  outline: 0;}

現在，是時候繪製我們的漢堡表徵圖了。下面的定義可以讓我們更清晰地瞭解整個過程。

• 頂層麵包: hamburger:before
• 中間奧爾良雞腿: .icon
• 底部麵包: .hamburger:after

很明顯，所有表徵圖的三條杠都有一些共同特性，我們可以把抽出來。

.hamburger:before,.hamburger:after {  content: "";}.hamburger:before,.hamburger .icon,.hamburger:after {  display: block;  width: 100%;  height: .2em;  margin: 0 0 .2em;  transition: transform .2s ease-in-out;  border-radius: .05em;  background: #596c7d;}/** * Styles for the active `.hamburger` icon */.hamburger.active:before,.hamburger.active .icon,.hamburger.active:after {  background: #2c3e50;}

上面的代碼，我們畫了三條杠在.hamburger裡面，給點間隙我們就能清晰地看到漢堡表徵圖了。

為了看上去更圓滑，我們設定了boder-radius屬性。由於我們的元素都是沒有文字的，我們再設定一個背景顏色。

不出意外，我們已經畫出一個山東煎餅。讓我們繼續接下來的動畫部分。

動畫

6種不同口味的漢堡，我們一一來解析。

垂直

用最簡單的方法，要讓漢堡旋轉，我們只需要在.active狀態的時候把它旋轉90度，或者270度也行，看起來更酷炫一點。

/** * VERTICAL HAMBURGER */.hamburger.hamburger-vertical.active {  transform: rotate(270deg);}

X/取消

這個表徵圖的做法就仁者見仁智者見者了，做法有很多，我第一個靈感是當中間的肉餅消失的時候，另外兩個麵包旋轉一下，就出來一個’X‘形狀了。

當然了，為了只是旋轉是不夠的。旋轉的同時還要在Y軸上做變化，否則距離有點遠。

/** * CLOSE/CANCEL/CROSS */.hamburger.hamburger-cancel.active .icon {  transform: scale(0);}.hamburger.hamburger-cancel.active:before {  transform: translateY(.4em) rotate(135deg);}.hamburger.hamburger-cancel.active:after {  transform: translateY(-.4em) rotate(-135deg);}

加號

這個動畫是這樣的：
- 中間的肉餅消失
- 上層麵包移動並旋轉來充當垂直的那一杠
- 底部的麵包移動並旋轉來充當水平線

這3個動作就可以完成hamburger到plus的動畫了

/** * PLUS */.hamburger.hamburger-plus.active .icon {  transform: scale(0);}.hamburger.hamburger-plus.active:before {  transform: translateY(.4em) rotate(90deg);}.hamburger.hamburger-plus.active:after {  transform: translateY(-.4em) rotate(180deg);}

減號

減號的變化是這樣的，中介層還是消失不見，其他兩塊向上向下移動，最終合成一塊。然後同樣地讓他們旋轉個180度，這樣就很酷炫了~

/** * MINUS/DASH */.hamburger.hamburger-minus.active {  transform: rotate(180deg);}.hamburger.hamburger-minus.active .icon {  transform: scale(0);}.hamburger.hamburger-minus.active:before {  transform: translateY(.4em);}.hamburger.hamburger-minus.active:after {  transform: translateY(-.4em);}

左箭頭

這個包括了移動，旋轉和調整上下兩塊麵包。最後加上一個旋轉180度

/** * LEFT ARROW */.hamburger.hamburger-arrow-left.active {  transform: rotate(180deg);}.hamburger.hamburger-arrow-left.active:before {  width: .6em;  transform: translateX(.4em) translateY(.2em) rotate(45deg);}.hamburger.hamburger-arrow-left.active .icon {  border-radius: .1em .25em .25em .1em;}.hamburger.hamburger-arrow-left.active:after {  width: .6em;  transform: translateX(.4em) translateY(-.2em) rotate(-45deg);}

右箭頭

這個就是左箭頭的鏡面複製了。可以複製左箭頭的代碼，再做適當變更。

/** * RIGHT ARROW */.hamburger.hamburger-arrow-right.active {  transform: rotate(180deg);}.hamburger.hamburger-arrow-right.active:before {  width: .6em;  transform: translateX(0) translateY(.2em) rotate(-45deg);}.hamburger.hamburger-arrow-right.active .icon {  border-radius: .25em .1em .1em .25em;}.hamburger.hamburger-arrow-right.active:after {  width: .6em;  transform: translateX(0) translateY(-.2em) rotate(45deg);}

總結

我在網上找了相似的實現，我發現Sara’s Navicon transformicons很酷，健壯並且更有感染力。

我希望你能喜歡這篇文章，可以在下面分享您的想法和建議。感謝閱讀。

http://helkyle.com/demos/hamburger-icons.html’ target=’__blank’>點擊查看Demo

本文根據@Rahul Arora所譯，整篇譯文帶有我自己的理解和意思，如果有譯得不好的地方或者不對之處，還請大家指點。如需轉載此譯文，須註明英文出處：http://w3bits.com/animated-hamburger-icons/

譯文出處:http://helkyle.com/2015/05/19/animated-hamburger-icons/