我正在调查Zepto.js的移动项目,但没有找到关于.anim操作的大量文档。我知道它是webkit特定的,但webkit动画css的哪些部分可以使用?例如,3d变换?
答案 0 :(得分:6)
从source您可以看到,它在内部使用-webkit-transform
,因此可以使用随身携带的所有内容。
<强> 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);
答案 1 :(得分:0)
Zepto还支持以下CSS transform属性:
translate(X|Y|Z|3d)
rotate(X|Y|Z|3d)
scale(X|Y|Z)
matrix(3d)
perspective
skew(X|Y)
他们似乎是prefixed like this:
vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' },