zepto如何监听元素的css变化？

Question

需要实时监听一个元素移动时的实时的位置变化(变化是通过animate做的)，并且在检测到变化时处理一些事情，原生好像没有这个样的事件。
类似于 $(elem).on('elem_move',function(){});
在使用zepto.js前提下如何实现。

Answer 1

可以使用zepto的animate方法实现动画，可以监听动画完成时执行回调函数
animate(properties, { duration: msec, easing: type, complete: fn })
如果想在元素变化过程中执行回调函数，使用setTimeout实现吧

Answer 2

zepto的animate原理是给元素加css3的transition过渡 或者 css3的animation动画实现
这两者只能监听动画结束时间无法监听运动过程
如果要获取元素的实时位置可以用 setInterval 或者 setTimeout+递归 实现实时监听 间隔时间要把握好
简单的封装：

;(function () {
    var timer = null;
    function listenMove() {
      var that = this;
      timer = setInterval(function () {
        that.trigger('elem_move');
      }, 0)
    }

    $.fn.myanimate = function (properties, duration, ease, callback, delay) {
      listenMove.call(this);
      return $(this).animate(properties, duration, ease, function () {
        clearInterval(timer);
        callback && callback.apply(this, arguments)
      }, delay)
    }
  })();
  
$(elem).myanimate({
  left: 1000
}, 5000);

$(elem).on("elem_move", function (e) {
  console.log(this)
});