Question

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

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

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

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

Answer 1

修改

“因为css3，我没有使用.animate进行简单的动画。 - Kluska000”

即使在animate()完成了实际动画，仍然可以使用jquery的start step，progress，css回调函数。例如，可以在目标元素上使用.animate() - 而无需实际动画元素 - 仅使用start，step，progress回调函数; duration已同步到css动画的持续时间。此外，似乎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/

在start，step，progress

上查看http://api.jquery.com/animate/

Answer 2

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

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

现场演示： Fiddle

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

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

HTML：

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

的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 + " <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;
});

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

2 个答案: