Получить новую позицию элемента после анимации перевода CSS3? - PullRequest
Новая
       5

Получить новую позицию элемента после анимации перевода CSS3?

3 голосов
/ 01 января 2012

Я использую анимацию перевода CSS3 для перемещения объекта, скажем, 10px 

@-webkit-keyframes move{
  0% {}
100% {
     -webkit-transform: translate(10px);
     }  
}

Если изначально объект был слева = 10px, то теперь он должен быть слева = 20px.Однако, когда я делаю 

document.getElementById("obj").style.left

, он возвращает мне значение 10px даже после анимации.Как я могу получить новое значение, используя JavaScript?Желательно ответ без jQuery или каких-либо других фреймворков:)

1 Ответ

5 голосов
/ 01 января 2012

Левое значение такое же, как элемент был переведен, а не перемещен с абсолютным позиционированием.

Кстати, именно поэтому они настолько эффективны, поскольку браузер может точно сказать, что перерисовывать, так что это может быть легко аппаратно ускорено и т. д., поскольку перевод не влияет на что-либо еще на странице.

Вы можете проверить матрицу преобразования, используемую внутри, с помощью WebKitCSSMatrix, а затем добавить ее в существующее смещение, но выСкорее всего, вам будет проще узнать, зачем вам это нужно, или отслеживать вручную (т. е. если вы начали с 10px, а затем перевели на 15px, теперь вы на 25px.)

...