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' },

Zepto.js中提供了哪些webkit动画

2 个答案: