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

时间:2010-11-19 10:44:08

标签: javascript

我正在调查Zepto.js的移动项目,但没有找到关于.anim操作的大量文档。我知道它是webkit特定的,但webkit动画css的哪些部分可以使用?例如,3d变换?

2 个答案:

答案 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)
  •   

http://zeptojs.com/#animate

他们似乎是prefixed like this

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