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

我需要获得元素的位置（使用jQuery）

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

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

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

Answer 1

编辑

“自从css3以来，我没有使用.animate进行简单的动画制作。 – Kluska000”

应该仍然能够利用jquery的animate() start ， step ， progress回调函数 – 即使在css完成实际动画。 例如，可以在目标元素上使用.animate() – 而不实际动画元素 – 仅利用start ， step ， progress回调函数; duration与css动画持续duration同步。 此外，似乎jquery .animate()实际上并不要求目标是DOM元素; 可能是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/

尝试（请参阅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

Answer 2

好吧，无论你如何创建你的动画，我认为最好的方法是创建一个动画类，并在dom加载后立即附加它，但只有在记录位置供以后使用之后。

基本上它会给你带来与你立即设置动画相同的效果，但是你将拥有所有细节的记录供以后使用：

现场演示： 小提琴

ps：我为chrome制作了演示，只需根据需要更改/删除-webkit-用于其他浏览器：

 -webkit-: chrome, safari -moz-: firefox -ms- : internet explorer -o-: opera without prefix: default 

HTML：

CSS：

 * { margin:0; padding:0; } #slider { width:100px; height:100px; display:block; background:red; } .SliderAnim { -webkit-animation:some_animation 2000ms linear forwards; } #status_div { position:relative; left:0; top:0; width:100%; height:auto; border:2px solid navy; color:black; } @-webkit-keyframes some_animation { from { -webkit-transform:translateX(-100px); } to { -webkit-transform:translateX(100px); } } 

JS：

 $(function () { // those are the position and offset before animation was attached var pX = $("#slider").position().left; var pY = $("#slider").position().top; var oX = $("#slider").offset().left; var oY = $("#slider").offset().top; // those are declarations for vars which will store the position and offset // of the element right after attaching the animation, and will result in the values // of the first fram of the animation var npX = 0; var npY = 0; var noX = 0; var noY = 0; // this is a timer function to write the details on the status bar setInterval(function () { // those are the position and offset of the element during the animation var apX = $("#slider").position().left; var apY = $("#slider").position().top; var aoX = $("#slider").offset().left; var aoY = $("#slider").offset().top; //print status bar info $("#status_div").html("BEFORE ATTACHING ANIMATION position: " + pX + "," + pY + " offset: " + oX + "," + oY + " 
 AFTER ATTACHING ANIMATION position: " + npX + "," + npY + " offset: " + noX + "," + noY + "
 DURING ANIMATION position: " + apX + "," + apY + " offset: " + aoX + "," + aoY); }, 100); //attach the animation class to the slider div $("#slider").addClass("SliderAnim"); //record the changed (will result in the first animation frame) npX = $("#slider").position().left; npY = $("#slider").position().top; noX = $("#slider").offset().left; noY = $("#slider").offset().top; });