标签：
在写自己项目的时候遇到了这样的一个效果，左侧菜单按钮点击弹出菜单的同时，菜单按钮变成 × 状。（参考关键字：汉堡按钮 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
建设之中，还希望大家多多指教。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
关于.animate()函数与css3中transition合用失效问题
标签：
原文地址：http://www.cnblogs.com/WitNesS/p/4643019.html
