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

davischin
  • 66

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

回复
阅读 3.7k
2 个回答

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

李十三
  • 13k

zeptoanimate原理是给元素加css3transition过渡 或者 css3animation动画实现
这两者只能监听动画结束时间无法监听运动过程
如果要获取元素的实时位置可以用 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)
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏