Impress.js & Использование атрибутов данных HTML5 Вместо преобразований CSS

Question

Я работал над презентацией с использованием Impress.js и думал о ее адаптации для использования на iPads. Но я обеспокоен тем, как Impress применяет преобразования к каждому слайду. Вместо того, чтобы просто использовать CSS, преобразования помещаются в HTML как атрибуты данных, а затем применяются с Javascript.

Это поражает меня как чрезмерно сложный и трудный способ делать вещи. Однако у меня нет большого опыта работы с атрибутами данных, поэтому я хотел получить некоторые мнения по этому поводу. Было бы лучше просто написать CSS в обычном режиме, или же преимущества использования атрибутов данных перевешивают проблемы?

Answer 1

Причина проста: если вы настроите преобразование CSS - либо через javascript, либо в CSS - когда вы попытаетесь получить его, он возвращает матричное преобразование. Так что вы делаете что-то простое, как ...

element.style.webkitTransform = "translate3d(10px,0,0)"; 
var transform = element.style.webkitTransform; 

transform не будет translate3d(10px,0,0), это будет matrix3d(10px,0,0,[...]). Для того, чтобы получить эти значения вам нужно разобрать матрицу, такие как ...

element.style.webkitTransform = "translate3d(10px,0,0)"; 
var matrix = new WebKitCSSMatrix(element.style.webkitTransform); //get the matrix 
var x = matrix.m41 //get the value of x in the matrix 
x += 1500 //modify x 
element.style.webkitTransform = matrix.toString //Apply the new transformation 

Это тот же код с данными-ATTR:

element.style.webkitTransform = "translate3d(10px,0,0)"; 
    x = element.dataset.x 
    element.style.webkitTransform = "translate3d(" + x + ",0,0)" 

Вы можете играть с 3D CSS Matrix здесь:

http://jsfiddle.net/F8xLv/