效果

发布于 2015-08-12 16:08:29 | 1277 次阅读 | 评论: 1 | 来源: 网络整理

效果

$.fx

全局动画设置：

• $.fx.off (在支持css transition 的浏览器中默认为false)：设置true来禁止所有animate() transitions。

• $.fx.speeds：用来设置动画时间的对象。

  < >_default (400 ms)
  fast (200 ms)slow (600 ms)

  animate(properties, [duration, [easing, [function(){ ... }]]]) ⇒ self
        animate(properties, { duration: msec, easing: type, complete: fn }) ⇒ self
        animate(animationName, { ... }) ⇒ self
    

  

  对当前Zepto集合对象中元素进行css transition属性平滑过渡。

  • properties: 一个对象，该对象包含了css动画的值，或者css帧动画的名称。
  • duration (默认 400)：以毫秒为单位的时间，或者一个字符串。
    • fast (200 ms)
    • slow (600 ms)
    • 任何$.fx.speeds自定义属性
  • easing (默认 linear)：指定动画的缓动类型，使用以下一个：
    • ease
    • linear
    • ease-in / ease-out
    • ease-in-out
    • cubic-bezier(...)
  • complete：动画完成时的回调函数

  Zepto 还支持以下 CSS transform 属性：

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

  如果duration参数为 0 或 $.fx.off 为 true(在不支持css transitions的浏览器中默认为true)，动画将不被执行；替代动画效果的目标位置会即刻生效。类似的，如果指定的动画不是通过动画完成，而且动画的目标位置即可生效。这种情况下没有动画， complete方法也不会被调用。

  如果第一个参数是字符串而不是一个对象，它将被当作一个css关键帧动画 CSS keyframe animation的名称。

  $("#some_element").animate({
          opacity: 0.25, left: '50px',
          color: '#abcdef',
          rotateZ: '45deg', translate3d: '0,10px,0'
          }, 500, 'ease-out')
      

  Zepto只使用css过渡效果的动画。jquery的easings不会支持。jquery的相对变化("=+10px") syntax 也不支持。请查看 list of animatable properties。浏览器的支持可能不同，所以一定要测试你所想要支持的浏览器。