JQuery получить положение элементов, когда он был анимирован с использованием анимации CSS3 - PullRequest
Новая
       13

JQuery получить положение элементов, когда он был анимирован с использованием анимации CSS3

1 голос
/ 01 февраля 2012

Если вы используете 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')

ОБНОВЛЕНИЕ:

Я разместил пример этого на 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>

Ответы [ 2 ]

1 голос
/ 03 февраля 2012

В настройках установить itemPositionDataEnabled: true.Тогда вы получите значения с .data('isotope-item-position').См. http://isotope.metafizzy.co/docs/options.html#itempositiondataenabled

.offset() и getComputedStyle не будут работать, поскольку Isotope использует CSS3-преобразования для позиционирования.Другое решение состоит в том, чтобы отключить преобразования, с transformsEnabled: false.

0 голосов
/ 01 февраля 2012

Вы можете использовать функцию смещения jQuery, которая даст вам относительную позицию. Если вам нужна точная позиция, вы можете взять точную позицию элемента контейнера. Итак, ваш код может выглядеть так: 

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);
...