How does zepto listen for css changes in elements?

needs to listen in real time for real-time changes in the position of an element as it moves (the changes are done through animate), and deal with things when changes are detected, and there seems to be no such event in the native.
is similar to $(elem). On ("elem_move",function () {}); how
is implemented using zepto.js.

Mar.06,2021

you can use the animate method of zepto to implement the animation, and you can listen to execute the callback function when the animation is completed
animate (properties, {duration: msec, easing: type, complete: fn})
if you want to execute the callback function during the element change, use setTimeout to implement

< hr class= "callback" > The animate principle of

zepto is to add transition transition of css3 or animation animation of css3 to realize
, both of which can only monitor the end time of animation, not the motion process
if you want to obtain the real-time position of the element, you can use setInterval or setTimeout+ Recursive to achieve real-time monitoring.

;(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)
});
Menu