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

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

阅读 2.4k
评论
    2 个回答
    • 325

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

      • 11.9k

      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)
      });
      
        撰写回答

        登录后参与交流、获取后续更新提醒

        相似问题
        推荐文章