CSS3 / JS在动画期间获取元素的位置 [英] CSS3/JS get position of element during animation

问题描述

我需要获取元素的位置（with jQuery）

I need to get position of element like (with jQuery)

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

但我需要在 css3翻译动画。 div位置的动画翻译包含在 position（）数据中。

However I need to do it during css3 translate animation. This animation translate of div position is included in position() data.

可以在动画过程中获取元素的位置，但是没有任何翻译的位置（就像没有动画一样）？ p>

Is it possible to get position of element during animation, but position without any translations (just like there would be no animation)?

推荐答案

编辑

从css3开始，不使用.animate进行简单动画 - Kluska000

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

应该仍然能够使用jquery的 （） 开始，步骤，进度回调函数 - 即使实际动画在 css 完成。例如，可以在目标元素中使用 .animate（） - 实际上不对元素进行动画处理 - 仅使用 start code> step ， progress 回调函数; duration 同步到 css 动画持续时间。此外，看起来jquery .animate（）实际上并不要求目标是 DOM 元素;可以是2 js objects 。

Should still be able to utilize jquery's animate() start, step, progress callback functions - even though actual animation done at css. e.g., could utilize .animate() at target element - without actually animating the element - only to utilize start, step, progress callback functions; with duration synced to css animations duration . Also, appear that jquery .animate() does not actually require that a target be a DOM element; could be 2 js objects.

另请参阅 window.requestAnimationFrame（）

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

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

尝试 console 在jsfiddle，下面链接）

Try (see console at jsfiddle, linked below)

  $(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/

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

查看 http://api.jquery.com/animate/ 在开始，步骤， progress

这篇关于CSS3 / JS在动画期间获取元素的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！