javascript - CSS3/JS 在动画期间获取元素的位置

Question

我需要获取元素的位置(使用 jQuery)

$(".mydiv").position().left;

但是我需要在 css3 translate animation 期间执行此操作。此 div 位置的动画转换包含在 position() 数据中。

是否有可能在动画期间获取元素的位置，但没有任何翻译的位置(就像没有动画一样)？

Answer 1

编辑

"I'm not using .animate for simple animations since css3. – Kluska000"

应该仍然能够利用 jquery 的 animate() start、step、progress 回调函数 - 甚至虽然实际动画是在 css 上完成的。例如，可以在目标元素上使用 .animate() - 无需实际动画元素 - 仅使用 start、step、progress 回调函数； duration 同步到 css 动画持续时间。此外，看起来 jquery .animate() 实际上并不要求目标是 DOM 元素；可能是 2 个 js 对象。

另见window.requestAnimationFrame()

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

尝试(参见 jsfiddle 的 console，链接如下)

  $(function() {
    $(".mydiv").animate({
      left :"0px"
      }, {
      duration : 1234,
      start : function (promise) {
              console.log($(".mydiv").position().left);
      },
      step : function (now, tween) {
              console.log($(".mydiv").position().left); 
      },
      progress : function (promise) {
              console.log($(".mydiv").position().left); 
      },
      complete : function () {
              $(this).animate({left:"0px"}, 1234)
      }
    });  
  });

jsfiddle http://jsfiddle.net/guest271314/xwL7v/

参见 http://api.jquery.com/animate/在 start , step , progress