Zepto.jsで利用可能なウェブキットのアニメーション

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のプロパティをサポートします。

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

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

彼らはであるように見えます：

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