Class: Animation

除了本组件，也可以使用animate.css。只要动态加载CLASS样式名就能实现动画。
API:https://daneden.github.io/animate.css/
CDN地址://zhcdn01.xoyo.com/xassets/lib/animatecss/animate.min.css

new Animation()

CSS3动画生成器 <br/> 一、提供javascript方法控制动画；二、提供事件接口监听动画；三、自动完成各平台兼容；四、提供大量内置动画，未使用时不插入。
版本:
  • 1.0
作者:
  • Brucewan
继承:
依赖:
  • module:lib/zepto.js
源码:
Example
new mo.Animation({
   target: $(elem),
    effect: 'shake'
});

  • 参数

  • 属性

  • 方法

  • 事件

  • 名称 类型 参数 默认值 描述
    config.target object 目标元素
    config.keyframes string 动画关键帧设置，如果参数effect为空，该参数为必选
    config.effect string <optional>
    		 '' 选择内置效果，也可以继续设置keyframes与内置效果叠加
    内置效果：flash, shake, swing, wobble, bounceIn, bounceInLeft, bounceInRight, bounceOut, bounceOutLeft, bounceOutRight, fadeIn, fadeOut, flip, flipInX, flipInY, flipOutX, flipOutY, rollIn, rollOut, zoomIn, zoomOut
    config.duration number <optional>
    		 2000 动画时间，单位ms
    config.easing string <optional>
    		 'swing' 动画缓冲类型
    config.autoPlay boolean <optional>
    		 true 是否自动播放
    config.fillMode boolean <optional>
    		 'none' none：默认值。不设置对象动画之外的状态
    forwards：设置对象状态为动画结束时的状态
    backwards：设置对象状态为动画开始时的状态
    both：设置对象状态为动画结束或开始的状态
    config.delay number <optional>
    		 0 设置对象动画延迟的时间，单位ms
    config.iteration number | string <optional>
    		 1 设置对象动画的循环次数。infinite为无限循环。
    config.direction string <optional>
    		 'normal' 设置对象动画在循环中是否反向运动。
    normal：正常方向
    alternate正常与反向交替

  • keyframes :Object

    关键帧
    源码:

    playing :boolean

    动画是否正在播放
    源码:

    target :Object

    目标动画元素
    源码:

  • <static> apply()

    应用动画
    源码:

    <static> parse()

    通过class自动触发动画
    源码:

    <static> revoke()

    撤消动画
    源码:

    apply()

    应用动画
    源码:

    constructor()

    构造函数
    继承自:
    • mo.Base#constructor
    源码:

    off()

    绑定事件
    继承自:
    • mo.Base#off
    源码:

    on()

    绑定事件
    继承自:
    • mo.Base#on
    源码:

    play()

    播放动画
    源码:

    rePlay()

    重新播放动画
    源码:

    revoke()

    撤消动画
    源码:

    stop()

    暂停动画播放
    源码:

    trigger()

    触发事件
    继承自:
    • mo.Base#trigger
    源码:

  • running: 动画播放时

    名称 类型 描述
    event object 事件对象
    源码:

    start: 动画开始时

    名称 类型 描述
    event object 事件对象
    源码:

    start: 动画结束时

    名称 类型 描述
    event object 事件对象
    源码:

    start: 动画重复时

    名称 类型 描述
    event object 事件对象
    源码:
    •

    内置效果运行Demo二维码

    Loading...

    加载效果运行Demo二维码

    Loading...

    方法与事件运行Demo二维码

    Loading...