jQuery在使用css3动画制作动画时获取元素位置

Question

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

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

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

top:0
left:0

例如，看看这个使用 jQuery Isotope 插件的例子中元素的位置：

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

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

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

更新：

我在 JsFiddle 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() 和 getComputedStyle 将不起作用，因为 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);