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

Question

Я работал над презентацией, используя Impress.js , и думал о том, чтобы адаптировать ее для использования на iPad. Но я обеспокоен тем, как 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

Это тот же код с data-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/