关于.animate()函数与css3中transition合用失效问题

在写自己项目的时候遇到了这样的一个效果，左侧菜单按钮点击弹出菜单的同时，菜单按钮变成 × 状。（参考关键字：汉堡按钮 http://www.htmleaf.com/Demo/201506232094.html）

大概就是下面gif中的动画效果：

大致的动画效果如下

1. 第一条横线（div）rotate -45deg

2. 第二条横线渐进消失

3. 第三条横线 rotate 45deg

像之前链接里面用纯 CSS3 实现的效果，改变元素 :hover 的 CSS 样式表就行。

因为现在是用点击触发动画效果，所以想到了 jQuery 中 .animate() 函数和 CSS3 中 transition 合用的方式。很自然的写法就是下面这种：（测试环境是Chrome浏览器）

1 $("a").on(‘click‘, function(event) {
2 　　event.preventDefault();
3 　　$("div:last-child").animate(
4 　　{
5 　　　　‘transition‘: ‘rotate(45deg)‘
6 　　}, 1000);
7 });    

然而并没有效果。百度了下，没有比较好的解决方式。

但是大家都普遍表示不要将 .animate() 函数和 CSS3 的 transition 合用。

然后在Stack Overflow上找到了详细的解答，链接贴出来：http://stackoverflow.com/questions/5462275/animate-element-transform-rotate

下面对这个答案进行了整理和汇总。

1. .animate() 和 transition 仍旧合用

首先需要明确的是，animate() 函数不能操作非数字表示的 CSS 属性变化。

CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"），同时可以使用 "+=" 或 "-=" 来创建相对动画。

这里还是使用 .animate() 和 transition 合用，然而 rotate(45deg) 并非数字表示的值，而是字符串。所以这里需要使用 .animate() 函数中的step函数部分，先贴代码：

 1 @keyframes rotateR {
 2   from {
 3     -moz-transform: translateY(0px) rotate(0);
 4     -ms-transform: translateY(0px) rotate(0);
 5     -webkit-transform: translateY(0px) rotate(0);
 6     transform: translateY(0px) rotate(0);
 7   }
 8   to {
 9     -moz-transform: translateY(7px) rotate(45deg);
10     -ms-transform: translateY(7px) rotate(45deg);
11     -webkit-transform: translateY(7px) rotate(45deg);
12     transform: translateY(7px) rotate(45deg);
13   }
14 }

1 $("div:last-child").animate({ textIndent: 0}, {
2         step: function(now, fx){
3             $(this).css(‘-webkit-animation‘, ‘rotateL 1s cubic-bezier(0.5, 0.2, 0.2, 1) forwards‘);
4             $(this).css(‘-ms-animation‘, ‘rotateL 1s cubic-bezier(0.5, 0.2, 0.2, 1) forwards‘);
5             $(this).css(‘animation‘, ‘rotateL 1s cubic-bezier(0.5, 0.2, 0.2, 1) forwards‘);
6         },
7         duration: ‘slow‘
8     }, 1000);

这里的 step 函数很好理解，就是每步动画执行完成之后调用的函数。

动画效果就是实质上就是每一段时间（很短）变化画面，这个 step 函数就是每段时间所调用的函数。

使用其中的 step() 函数可以避免指定 CSS 样式的局限，这里作为记录。

附上讲解 .animate() 函数的链接：http://www.css88.com/jqapi-1.9/animate/

2. 不使用 .animate() 函数，采用 .addClass() 函数

之前印象深刻的是，中外网友都普遍表示不要将 .animate() 函数和 CSS3 的 transition 合用。

所以有个答主提出了下面的回答，按照答主的答案，我把代码贴出来：

 1 div:last-child.rotateL-addClass{
 2     -webkit-transition:all 1s ease-in-out;
 3     -moz-transition:all 1s ease-in-out;
 4     -o-transition:all 1s ease-in-out;
 5     -ms-transition:all 1s ease-in-out;
 6     transition:all 1s ease-in-out;
 7     -moz-transform: translateY(-7px) rotate(-45deg);
 8     -ms-transform: translateY(-7px) rotate(-45deg);
 9     -webkit-transform: translateY(-7px) rotate(-45deg);
10     transform: translateY(-7px) rotate(-45deg);
11 }

1 $("div:last-child").removeClass(‘rotateL-addClass‘);

这个答主所强调的一点是，jQuery 所实现的动画效果是以牺牲CPU为代价的。

尤其是当出现大量元素同时执行动画效果的时候，会带来意想不到的结果，相比于这个，浏览器原生支持的 CSS 样式就变得更加优秀。

这里在留个链接，是国外关于这两者执行效率进行测试的情况： http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

（里面主要提到 CSS 的动画效果无论是在大量元素的基数上还是在颜色变化的效果中，都有更好的效率）

3. 可以使用 jQuery 的插件

没有仔细研究过，留个地址，有兴趣的同学可以看看：https://github.com/puppybits/QTransform

结语

一个右侧菜单栏出现的效果折腾了一下午，自己水平还是有问题。

给自己的网站宣传下：www.witness23.info

建设之中，还希望大家多多指教。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄