Можно ли найти текущий (x, y, z) элемента при его перемещении, используя translate3d (x, y, z)? - PullRequest
Новая
       10

Можно ли найти текущий (x, y, z) элемента при его перемещении, используя translate3d (x, y, z)?

3 голосов
/ 07 января 2011

Используя CSS3s -webkit-transform: translate3d(x,y,z); возможно ли отследить движение (x, y, z) при его перемещении с помощью javascript?

Пример: Объект начинается с (0,0,0), и мы переводим его в (4,4,0) в течение 4 секунд.

Теоретически, в первую секунду элемент должен быть размещен в (1,1,0), в то время как во второй секунде элемент должен быть в (2,2,0) и т. Д. Есть ли способ для Javascript отследить объект?

Получение свойства css для translate3d (x, y, z) просто возвращает окончательные координаты перевода. Что и следовало ожидать как то, что он установлен.

1 Ответ

4 голосов
/ 09 января 2011

Если вы перемещаете элемент через CSS-переходы, то нет, нет способа закрепить элемент.Существуют списки событий только для transitionstart и transitionend.

Если вы анимируете через javascript, тогда да, вы можете проследить x, y, z до: 

node = document.getElementById("yourid");

//your animation loop
  console.log(window.getComputedStyle(node).webkitTransform); //this will return a string
  var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
  console.log(curTransfrom); //this will return an object
//end animation loop
...