Detect and use vendor prefixes for transform property

Author: daniel-lundin

src/animation.js

@@ -4,7 +4,7 @@ const easing = require('./easing.js');
 const tweeners = require('./tweeners');
 const state = require('./state.js');
 
-function createAnimation(startState, endState, options) {
+function createAnimation(startState, endState, options, transformProperty) {
   const duration = utils.optionOrDefault(options.duration, 500);
 
   const delay = utils.optionOrDefault(options.delay, 0);
@@ -136,7 +136,7 @@ function createAnimation(startState, endState, options) {
         return;
       var matrix = tweener.asMatrix();
       var properties = tweener.getProperties();
-      utils.updateElementTransform(element, matrix, null, properties.perspective);
+      utils.updateElementTransform(element, matrix, transformProperty, properties.perspective);
       utils.updateElementProperties(element, properties);
     }
   };

src/engine.js

@@ -119,7 +119,7 @@ const Engine = {
     var startState = stateFromOptions(options, previousState, true);
     var endState = stateFromOptions(options, previousState, false);
 
-    var animation = Animation.createAnimation(startState, endState, options);
+    var animation = Animation.createAnimation(startState, endState, options, this.transformProperty);
     return animation;
   },
 

src/tests/animationTests.js

@@ -59,5 +59,18 @@ describe('animations', () => {
     });
   });
 
+  describe('updateElement', () => {
+    const startState = createState({});
+    const endState = createState({});
+
+    it('should use transformProperty passed in constructor', () => {
+      const element = { style: {} };
+      const transformProperty = 'webkitTransform';
+      const animation = createAnimation(startState, endState, {},  transformProperty);
 
+      animation.updateElement(element, true);
+
+      expect(element.style).to.have.property(transformProperty);
+    });
+  });
 });

src/utils.js

@@ -17,8 +17,7 @@ function updateElementTransform(element, matrix, transformProperty, perspective)
     cssPerspective = 'perspective(' + perspective + 'px) ';
   }
   var cssMatrix = matrix.asCSS();
-  //element.style[transformProperty] = cssPerspective + cssMatrix;
-  element.style.transform = cssPerspective + cssMatrix;
+  element.style[transformProperty] = cssPerspective + cssMatrix;
 }
 
 var updateElementProperties = function(element, properties) {