Zepto.js中有什么webkit动画可用

Question

我正在调查Zepto.js的移动项目，但没有在.anim动作中找到很多文档。我知道它是webkit特定的，但webkit动画css的哪些部分可以使用？例如，3d变换？

Answer 1

从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); 

Answer 2

的Zepto还支持以下CSS transform属性：

• translate(X|Y|Z|3d)
• rotate(X|Y|Z|3d)
• scale(X|Y|Z)
• matrix(3d)
• perspective
• skew(X|Y)

（http://zeptojs.com/#animate）

他们似乎prefixed like this：

vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' },