Use translate, not translate3d

This has the added benefits of removing vendor prefixes and removing the reference to global `document` so serverside rendering is possible. Also added .gitignore for WebStorm IDE.

Author: nehardt

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /dist
-npm-debug.log
+npm-debug.log
+/.idea

README.md

@@ -120,8 +120,8 @@ A function can be used to perform custom transitions:
 navigationController.pushView(<MyView />, {
   transition(prevElement, nextElement, done) {
     // Do some sort of animation on the views
-    prevElement.style.transform = 'translate3d(100%, 0, 0)';
-    nextElement.style.transform = 'translate3d(0, 0, 0)';
+    prevElement.style.transform = 'translate(100%, 0)';
+    nextElement.style.transform = 'translate(0, 0)';
     // Tell the navigationController when the animation is complete
     setTimeout(done, 500);
   }

spec/navigation-controller.spec.jsx

@@ -10,12 +10,8 @@ import rebound from 'rebound';
 import NavigationController from '../src/navigation-controller';
 import View from '../examples/src/view';
 
-import { getVendorPrefix } from '../src/util/dom';
-
 const { Transition } = NavigationController;
 
-const transformPrefix = getVendorPrefix('transform');
-
 class ViewA extends View { }
 class ViewB extends View { }
 class ViewC extends View { }
@@ -94,8 +90,8 @@ describe('NavigationController', () => {
   });
   describe('#componentDidMount', () => {
     it('transforms the view wrappers', () => {
-      expect(viewWrapper0).to.have.deep.property(`style.${transformPrefix}`);
-      expect(viewWrapper1).to.have.deep.property(`style.${transformPrefix}`);
+      expect(viewWrapper0).to.have.deep.property(`style.transform`);
+      expect(viewWrapper1).to.have.deep.property(`style.transform`);
     });
   });
   describe('#__transformViews', () => {
@@ -107,8 +103,8 @@ describe('NavigationController', () => {
     it('translates the views', (done) => {
       controller.__transformViews(10, 20, 30, 40);
       requestAnimationFrame(() => {
-        expect(viewWrapper1.style[transformPrefix]).to.equal(`translate3d(10%, 20%, 0px)`);
-        expect(viewWrapper0.style[transformPrefix]).to.equal(`translate3d(30%, 40%, 0px)`);
+        expect(viewWrapper1.style.transform).to.equal(`translate(10%, 20%)`);
+        expect(viewWrapper0.style.transform).to.equal(`translate(30%, 40%)`);
         done();
       });
     });
@@ -356,13 +352,13 @@ describe('NavigationController', () => {
         transition(prevElement, nextElement, done) {
           _prevElement = prevElement;
           _nextElement = nextElement;
-          prevElement.style[transformPrefix] = 'translate3d(10px, 20px, 0px)';
-          nextElement.style[transformPrefix] = 'translate3d(30px, 40px, 0px)';
+          prevElement.style.transform = 'translate(10px, 20px)';
+          nextElement.style.transform = 'translate(30px, 40px)';
           setTimeout(done, 500);
         },
         onComplete() {
-          expect(_prevElement.style[transformPrefix]).to.equal(`translate3d(10px, 20px, 0px)`);
-          expect(_nextElement.style[transformPrefix]).to.equal(`translate3d(30px, 40px, 0px)`);
+          expect(_prevElement.style.transform).to.equal(`translate(10px, 20px)`);
+          expect(_nextElement.style.transform).to.equal(`translate(30px, 40px)`);
           done();
         }
       });

spec/util/dom.spec.js

@@ -2,7 +2,6 @@ import React from 'react';
 import rebound from 'rebound';
 import classNames from 'classnames';
 
-import { getVendorPrefix } from './util/dom';
 import { dropRight, last, takeRight } from './util/array';
 import { assign } from './util/object';
 
@@ -18,9 +17,6 @@ const {
   mapValueInRange
 } = rebound.MathUtil;
 
-
-const transformPrefix = getVendorPrefix('transform');
-
 const optionTypes = {
   pushView: {
     view: React.PropTypes.element.isRequired,
@@ -132,9 +128,9 @@ class NavigationController extends React.Component {
     const prevView = this.refs[`view-wrapper-${prev}`];
     const nextView = this.refs[`view-wrapper-${next}`];
     requestAnimationFrame(() => {
-      prevView.style[transformPrefix] = `translate3d(${prevX}%,${prevY}%,0px)`;
+      prevView.style.transform = `translate(${prevX}%,${prevY}%)`;
       prevView.style.zIndex = Transition.isReveal(this.state.transition) ? 1 : 0;
-      nextView.style[transformPrefix] = `translate3d(${nextX}%,${nextY}%,0px)`;
+      nextView.style.transform = `translate(${nextX}%,${nextY}%)`;
       nextView.style.zIndex = Transition.isReveal(this.state.transition) ? 0 : 1;
     });
   }