Impress.js和使用HTML5數據屬性而不是CSS轉換

我一直在使用Impress.js進行演示，並且正在考慮將它適配爲在iPad上使用。但我很擔心Impress如何將變換應用到每張幻燈片。而不是僅僅使用CSS，轉換將作爲數據屬性放入HTML中，然後使用Javascript應用。Impress.js和使用HTML5數據屬性而不是CSS轉換

這讓我覺得這是一種過度複雜和困難的做事方式。雖然我沒有很多處理數據屬性的經驗，所以我想對此有所看法。正常寫CSS還是更好，或者使用數據屬性的好處是否超過了麻煩？

來源

2012-01-19 Jordan Acosta

原因很簡單：如果您設置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：

你可以玩的3D CSS矩陣在這裏：

http://jsfiddle.net/F8xLv/

來源

2012-01-19 09:14:05 Duopixel

所以最好使用比數據屬性有解析矩陣，因爲後者甚至比以前更復雜？看起來你上面演示的方法可能同樣有效，不難實現。 –

我用數據集示例更新了答案，我認爲它更具可讀性。 – Duopixel

好吧，我現在明白了。 –

Impress.js和使用HTML5數據屬性而不是CSS轉換

回答

相關問題