关于Zepto的animate
感觉设计有点不甚合理的地方:
正常使用:
$("#some_element").animate({ opacity: 0.25, left: '50px', color: '#abcdef', rotateZ: '45deg', translate3d: '0,10px,0' }, 500, 'ease-out')
opacity,left,color都是正常的属性,可为什么rotateZ,translate3d就变成值了????
Zepto内部做了转换:
如:
translate3d
$('div').anim({ translate3d: '10px, 20px, 30px'}, 2, 'ease-out');
Zepto.Fx
(function($){ $.fn.anim = function(props, dur, ease){ var transforms = [], opacity, k; for (k in props) k === 'opacity' ? opacity=props[k] : transforms.push(k+'('+props[k]+')'); return this.css({ '-webkit-transition': 'all '+(dur||0.5)+'s '+(ease||''), '-webkit-transform': transforms.join(' '), opacity: opacity }); } })(Zepto);