Javascript CSS3/JS在动画中获取元素的位置

我需要得到元素的位置，比如（使用jQuery）

但是，我需要在css3翻译动画期间执行此操作。div位置的动画转换包含在

position（）

数据中

是否可以在动画期间获取元素的位置，但不进行任何转换（就像没有动画一样）？编辑

---

“自css3以来，我没有使用.animate制作简单动画。-Kluska000”

应该仍然能够利用jquery的

animate（）

开始

，

步骤

，

进度

回调函数-即使实际动画是在

css

上完成的。e、 例如，可以在目标元素上使用

.animate（）

，而不实际设置元素的动画，只使用

开始

，

步骤

，

进度

回调函数；与

duration

同步到

css

animations duration。另外，jquery

.animate（）

似乎并不要求目标是

DOM

元素；可能是2个js

对象

另请参见

window.requestAnimationFrame（）

试试看（参见JSFIDLE上的控制台，链接如下）

JSFIDLE

---

请参见

开始

，

步骤

，

进度

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

基本上，它会提供与立即设置动画相同的效果，但会记录所有细节供以后使用：

现场演示：

ps：我为chrome做了演示，只需根据需要为其他浏览器更改/删除-webkit即可：

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

html:

js:

$（函数（）{
//这些是附加动画之前的位置和偏移
var pX=$（“#滑块”）.position（）.left；
var pY=$（“#滑块”）.position（）.top；
var oX=$（“#滑块”）.offset（）.left；
var oY=$（“#滑块”）.offset（）.top；
//这些是存储位置和偏移量的变量声明
//在附加动画后立即显示元素的值，并将生成值
//动画的第一帧
var-npX=0；
var-npY=0；
var-noX=0；
var-noY=0；
//这是一个定时器函数，用于在状态栏上写入详细信息
setInterval（函数（）{
//这些是动画期间元素的位置和偏移
var apX=$（“#滑块”）.position（）.left；
var apY=$（“#滑块”）.position（）.top；
var aoX=$（“#滑块”）.offset（）.left；
var aoY=$（“#滑块”）.offset（）.top；
//打印状态栏信息
$（“#status_div”）.html（“在附加动画位置：“+pX+”、“+pY+”偏移量：“+oX+”、“+oY+”
在附加动画位置：“+npX+”、“+npY+”偏移量：“+noX+”、“+noY+”
在附加动画位置：“+apX+”、“+apY+”偏移量：“+aoX+”、“+aoY”）；
}, 100);
//将动画类附加到滑块div
$（“#slider”）.addClass（“SliderAnim”）；
//记录更改的动画（将产生第一个动画帧）
npX=$（“#滑块”）.position（）.左；
npY=$（“#滑块”）.position（）.top；
noX=$（“#滑块”）.offset（）.左；
noY=$（“#滑块”）.offset（）.top；
});

为什么不在开始转换之前的某个时刻将其保存在var中？这是因为当元素有一些css动画时，它会在项目添加到DOM时立即开始播放，并且我可以在项目添加到DOM后测量任何内容，所以我无法在“动画”之前进行测量。如果手动添加动画，然后在添加动画之前保存位置。如果动画是在css中设置的，并在dom加载后立即开始播放，则位置与您在css中设置的位置相同，或者如果您使用JavaScription更改它，则可以计算出位置。我认为这只是在动画的第一个关键帧没有平移的情况下。但是，例如，当你有像“从左渐入”（这是我的情况）这样的动画，在动画开始时将100px平移到一侧，这将添加到位置，而不是整数。好的，让我理解一下，你的动画是在css文件中硬编码的是吗？我的意思是，你不使用javascript附加动画，它是在css文件中硬编码的，以便在css加载后立即启动。是吗？我没有使用.animate作为css3之后的简单动画。

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

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

<div id="status_div">&nbsp;</div>
<div id="slider"></div>

* {
    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);
    }
}

$(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 + " <br/> AFTER ATTACHING ANIMATION position: " + npX + "," + npY + "  offset: " + noX + "," + noY + "<br/> 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;
});