当使用 css3 动画进行动画处理时，jQuery 获取元素位置

Question

如果您使用 CSS3 动画在屏幕上为相对位置的元素定位内容，

-moz-transform: translate(125px, 5px);

当您使用 javascript 询问项目位置时，它会报告该项目仍然是

top:0
left:0

例如，看看此示例中使用的元素的位置jQuery 同位素插件：

http://isotope.metafizzy.co/demos/basic.html

将要我必须像这样使用 jQuery css() 方法吗？我什至不知道这是否有效！

$(element).css('-moz-transform')

更新：

我已经在 J​​sFiddle http://jsfiddle.net/uQtur/3/

JS

var elements = $('.element').each(function(i, e){
    var el = $(this);
    var position = el.position();
    var offset = el.offset();

    console.log('position', position);
    console.log('offset', offset);

    var positionLeft = window.getComputedStyle(el.get(0), null).getPropertyValue('left');
    var positionTop = window.getComputedStyle(el.get(0), null).getPropertyValue('top');

    console.log('computed position left', positionLeft);
    console.log('computed position top', positionTop);  

    var transform = el.css('-moz-transform');
    console.log(transform);

    // > matrix(1, 0, 0, 1, 340px, 10px)
});

HTML

<div id='container'>
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(10px, 10px);'>
        H
    </div>
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(120px, 10px);'>
        He
    </div>
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(230px, 10px);'>
        He
    </div>
    <div class='element' style='left: 0px; top: 0px; -moz-transform: translate(340px, 10px);'>
        He
    </div>
</div>

Answer 1

在选项中设置itemPositionDataEnabled：true。然后，您可以使用 .data('isotope-item-position') 获取值。请参阅http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled

.offset() 和 getCompulatedStyle 将不起作用，因为 Isotope 利用 CSS3 转换进行定位。另一个解决方案是使用 transformsEnabled: false 禁用转换。

Answer 2

您可以使用 jQuery 的 offset 函数，它会给您相对位置。如果需要准确的位置，则可以获取容器元素的准确位置。因此，您的代码可能如下所示：

var off = $("div.element[data-symbol='Ca']").offset();
var containPos = $("#container").position();

var totalTop = off.top + containPos.top;
var totalLeft = off.left + containPos.left;

console.log(totalTop);
console.log(totalLeft);