一种汉堡动画图标的实现

原因

Google Material Design的设计语言出现，使得越来越多的website使用更多的交互效果，

最近风行的汉堡风格网站里面，跟风出现了一些小的交互效果，例如这种汉堡按钮的交互变化。

这里提供一种可供选择的实现方式。

实例

先看看我们实现的效果如何。

http://demo2.mixmedia.com/html/3/

鼠标点击汉堡按钮的时候，会触发一个交互的小动画，汉堡按钮会变成叉……其实就是这么简单的交互……

OK，效果看到，现在我们需要想想怎样去实现它，可选方案有 SVG / CSS3 Transform，

我们查一下caniuse 看看两种方案的适用平台情况。

这个是 CSS3 Transform ： http://caniuse.com/#feat=css-transitions

这个是 SVG http://caniuse.com/#feat=svg-smil

情况好明显……SVG方案之前已经介绍过了，虽然实现的效果及制作的工具都比 CSS3 Transform要好，不过兼容性没有办法保证。

或许等到IE都灭亡了，我们就可以放心的使用SVG方案了。

OK，现在我们使用 CSS3 Transform 去实现这个效果。

前提条件

查 caniuse 我们得知 CSS3 Transform 也不是全兼容的方案。

至少IE8/9 都是不鸟我们的……所以我们需要一个检测 HTML5 功能的工具，为我们区别对待支持 CSS3 Transform的现代浏览器
及不支持 CSS3 Transform的考古浏览器。

有人会问不支持CSS3 Transform的考古浏览器咋办啊？……还用说，用图啊……直接换背景图……

这个检测HTML5支持情况的工具，应该部分前端的同事知道的了，就是 modernizr 

要检测所有的支持的特性，是很费时费力的……所以modernizr 为我们提供了一个builder，我们可以选择需要检测的特性，再打包特定的 modernizr 。我们直选选择  CSS 2D Transforms / CSS Transitions。

将生成的js引入到我们的页面中，我们就会发现HTML标签里面会诡异地出现了一些新的Class……

没错 modernizr 会检测浏览器对HTML5特性的支持情况，增加相应的class到html 标签中，如图所示，

就是表示 这个chrome 支持 css transferms 跟 css transitions 。

OK，我们就用这个 csstransitions class 去作判断写我们的CSS……

代码

由于时间关系……（对……码字太多了……估计会没人看到这的……赶紧上代码让人Copy……）

为实现交互动画之前汉堡按钮的HTML是这样的

<div class="menu-wrapper">
	<a href="#" class="menu-btn" data-3-action="action/top_menu">
	</a>
</div>

我改造一下在A里面再添点料……

<div class="menu-wrapper">
	<a href="#" class="menu-btn" data-3-action="action/top_menu">
        <div class="html5-button">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
	</a>
</div>

然后在+一大段CSS

.html5-button { display: none; height: 41%; width: 41%; padding: 29%;  }
.html5-button div, .html5-button .line2:before, .html5-button .line2:after { transition: background .3s ease-in-out; background-color: #030001; height: 5px; margin-top:6px; }
.csstransitions .html5-button { display: block; }
.csstransitions .menu-wrapper.open .menu-btn, .csstransitions .menu-btn {  background: none; }
.html5-button .line2:before, .html5-button .line2:after { content: " "; display: block; }
.open .html5-button .line1, .open .html5-button .line3, .open .html5-button .line2 { background: transparent; transition-duration:0;  }
.open .html5-button .line2:before {transform: translateY(2px) rotate(45deg); }
.open .html5-button .line2:after {transform: translateY(-2px) rotate(-45deg); }
.html5-button .line2:before {transform: translateY(-11px); margin-top:0;  }
.html5-button .line2:after {transform: translateY(6px); margin-top:0; }
.html5-button .line2:before, .html5-button .line2:after { transition:transform .3s ease-in-out;  }

@media (max-width: 767px) {
    .html5-button { height: 60%; width: 60%; padding: 14%; }
}

看到%号不要惊慌……响应式嘛，一般我们都是用%去控制的尺寸的。不过这不是重点

重点在最后6行……这个才是实现这个动画的CSS…… （看不懂想我解释?……没门，我不是为了科普才写这玩意的，而是让人去copy的……）

人有会问不用写IE8/9的兼容吗？er……其实这个本来之前就用背景图实现的，所以不支持 css transferms 的情况下，

会使用原来背景图的方案。这貌似是一种不错的思路，先用兼容的方案做一次，再添加现代的方案，
这样就可以实现优雅降级……

– EOF –