Zepto animate

时间:2021-1-8 作者:admin

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

对当前对象集合中元素进行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:动画完成时的回调函数li>delay: 以毫秒为单位的过度延迟时间 v1.1+
      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。浏览器的支持可能不同,所以一定要测试你所想要支持的浏览器。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。