получить текущий CSS3 Перевести в анимации

Question

Привет, я хотел бы знать, как получить текущий TranslateX анимации css3.

У меня есть эта анимация:

@-webkit-keyframes pictureTransition {
    from,5% {-webkit-transform:translateX(0px);}
    10%,25% {-webkit-transform:translateX(-1024px);}
    30%,45% {-webkit-transform:translateX(-2048px);}
    50%,65% {-webkit-transform:translateX(-3072px);}
    70%,85% {-webkit-transform:translateX(-4096px);}
    90%,to {-webkit-transform:translateX(-5120px);}
}

и у меня есть кнопка, которая при нажатии получит текущий translateX в анимации и сохранит его в переменной для дальнейшего использования. Есть идеи?

Answer 1

Вы сможете получить текущее значение translateX с помощью этого:

var transformX = new WebKitCSSMatrix(window.getComputedStyle([YOUR ELEMENT HERE]).webkitTransform).m42;

Таким образом, вам не нужно разбивать строку, и все такое, что в джазе ... m42 - это матричное значение для X, m41 - это значение матрицы для Y

См. эту ссылку для получения дополнительной информации.

Answer 2

Вот как бы я это сделал: http://jsfiddle.net/joshnh/dCSBU/

Код, используемый с: Получить значение -webkit-transform элемента с помощью jquery