Added staticTransform property

Author: daniel-lundin

package.json

@@ -29,7 +29,8 @@
     "mocha": "^2.3.3",
     "sinon": "^1.17.1",
     "watchify": "^3.4.0",
-    "uglify-js": "^2.4.24"
+    "uglify-js": "^2.4.24",
+    "chai-string": "^1.1.4"
   },
   "spm": {
     "main": "snabbt.js",

src/animation.js

@@ -136,7 +136,7 @@ function createAnimation(startState, endState, options, transformProperty) {
         return;
       var matrix = tweener.asMatrix();
       var properties = tweener.getProperties();
-      utils.updateElementTransform(element, matrix, transformProperty, properties.perspective);
+      utils.updateElementTransform(element, matrix, transformProperty, properties.perspective, options.staticTransform);
       utils.updateElementProperties(element, properties);
     }
   };

src/tests/animationTests.js

@@ -1,7 +1,9 @@
 'use strict';
 
 const sinon = require('sinon');
-const expect = require('chai').expect;
+const chai = require('chai')
+const expect = chai.expect;
+chai.use(require('chai-string'));
 const createAnimation = require('../animation.js').createAnimation;
 const createState = require('../state.js').createState;
 
@@ -72,5 +74,26 @@ describe('animations', () => {
 
       expect(element.style).to.have.property(transformProperty);
     });
+
+    it('should default to transform if no transformProperty is passed', () => {
+      const element = { style: {} };
+      const animation = createAnimation(startState, endState, {});
+
+      animation.updateElement(element, true);
+
+      expect(element.style).to.have.property('transform');
+    });
+
+    it('should use set staticTransform if present in options', () => {
+      const element = { style: {} };
+      const options = {
+        staticTransform: 'translateX(100px)'
+      };
+      const animation = createAnimation(startState, endState, options);
+
+      animation.updateElement(element, true);
+
+      expect(element.style.transform).to.startWith(options.staticTransform);
+    });
   });
 });

src/utils.js

@@ -11,13 +11,14 @@ function optionOrDefault(option, def) {
   return option;
 }
 
-function updateElementTransform(element, matrix, transformProperty, perspective) {
-  var cssPerspective = '';
-  if (perspective) {
-    cssPerspective = 'perspective(' + perspective + 'px) ';
-  }
+function updateElementTransform(element, matrix, transformProperty, perspective, staticTransform) {
+  var cssPerspective = perspective ? 'perspective(' + perspective + 'px) ' : '';
   var cssMatrix = matrix.asCSS();
-  element.style[transformProperty] = cssPerspective + cssMatrix;
+  var cssStaticTransform = staticTransform ? staticTransform : '';
+  if (transformProperty)
+    element.style[transformProperty] = cssStaticTransform + cssPerspective + cssMatrix;
+  else
+    element.style.transform = cssStaticTransform + cssPerspective + cssMatrix;
 }
 
 var updateElementProperties = function(element, properties) {