MIP.util.naboo

• 描述：

  方法是 Naboo 模块提供的执行 CSS3 transiton 动画的函数。

• 参数：

• 返回值：

• 用法

start

• 描述：

  开始执行动画的指令函数，只要在 start 调用之后动画才会开始执行。

• 参数：

• 返回值：

• 用法：

  MIP.util.naboo.animate(ele, {
    width: "90%"
  }, {
    duration: 2000,
    cb: function () {
      console.log('动画结束')
    }
  }).start()

• 描述：

  让动画进入下一步的指令函数，一般在 Naboo 插件中调用。

• 参数：

• 返回值：

• 用法：

cancel

• 描述：

  取消动画的指令，调用该函数后，当前未执行完的动画仍会继续执行完成，后续的动画不会执行。

• 参数：

  无

• 用法：

  let instance
  // 点击按钮1开始执行动画
  startBtn.onclick = function () {
    instance = MIP.util.naboo.animate(ele1, {
      'transform': 'translateX(10px)'
    }, {
      cb: function () {
        console.log('动画1结束')
      }
    })
    .animate(ele2, {
      'transform': 'translateX(20px)'
    }, {
      duration: 3000,
      cb: function () {
        console.log('动画2结束')
      }
    })
    .start(function () {
      animate4text.innerHTML += "<p>start回调</p>"
    })
  }
  //在元素 ele1 动画未执行完成时，点击按钮2后会终止后续动画执行，
  //即 ele1 动画执行完成后不会执行 ele2的动画
  cancelBtn.onclick = function () {
    instance.cancel()
  

• 参数：

• 返回值：

done

• 描述：

  Naboo 的 done 插件，可用于在任何一个动画插件后进行回调。

• 参数：

• 返回值：

• 用法：

  MIP.naboo.animate(ele1, {
    width: "90%"
  }, {
    duration: 2000,
    cb: function () {
      console.log('动画1结束')
    }
  })
  .done(function (next) {
    console.log('done调用完成')
    next()
  })
  .animate(ele2, {
    'transform': 'translateX(200px)'
  }, {
    duration: 2000,
    ease: "ease",
    cb: function () {
      console.log('动画2结束')
    }
  

• 描述：

  Naboo 的静态方法：插件注册函数，如果animate不能满足需求，亦或是站长需要封装自己的插件来做到方便调用，可以通过该方式来进行方法注册。

• 参数：

• 用法：