Revert "transition everything".

That threw off calculations on resize. Now infer things to transition from the css object map.

dist/shuffle.js

@@ -845,6 +845,18 @@ function getCenteredPositions(itemRects, containerWidth) {
   });
 }
 
+/**
+ * Hyphenates a javascript style string to a css one. For example:
+ * MozBoxSizing -> -moz-box-sizing.
+ * @param {string} str The string to hyphenate.
+ * @return {string} The hyphenated string.
+ */
+function hyphenate(str) {
+  return str.replace(/([A-Z])/g, function (str, m1) {
+    return "-" + m1.toLowerCase();
+  });
+}
+
 function arrayUnique(x) {
   return Array.from(new Set(x));
 }
@@ -1181,10 +1193,20 @@ var Shuffle = function (_TinyEmitter) {
   }, {
     key: 'setItemTransitions',
     value: function setItemTransitions(items) {
-      var str = 'all ' + this.options.speed + 'ms ' + this.options.easing;
+      var speed = this.options.speed;
+      var easing = this.options.easing;
+      var positionProps = this.options.useTransforms ? ['transform'] : ['top', 'left'];
+
+      // Allow users to transtion other properties if they exist in the `before`
+      // css mapping of the shuffle item.
+      var properties = positionProps.concat(Object.keys(ShuffleItem.Css.HIDDEN.before).map(function (k) {
+        return hyphenate(k);
+      })).join();
 
       items.forEach(function (item) {
-        item.element.style.transition = str;
+        item.element.style.transitionDuration = speed + 'ms';
+        item.element.style.transitionTimingFunction = easing;
+        item.element.style.transitionProperty = properties;
       });
     }
   }, {

src/hyphenate.js

@@ -0,0 +1,9 @@
+/**
+ * Hyphenates a javascript style string to a css one. For example:
+ * MozBoxSizing -> -moz-box-sizing.
+ * @param {string} str The string to hyphenate.
+ * @return {string} The hyphenated string.
+ */
+export default function hyphenate(str) {
+  return str.replace(/([A-Z])/g, (str, m1) => `-${m1.toLowerCase()}`);
+}

src/shuffle.js

@@ -18,6 +18,7 @@ import {
   getCenteredPositions,
 } from './layout';
 import arrayMax from './array-max';
+import hyphenate from './hyphenate';
 
 function arrayUnique(x) {
   return Array.from(new Set(x));
@@ -109,7 +110,7 @@ class Shuffle extends TinyEmitter {
     // styles to be applied without transitions.
     this.element.offsetWidth; // eslint-disable-line no-unused-expressions
     this.setItemTransitions(this.items);
-    this.element.style.transition = 'height ' + this.options.speed + 'ms ' + this.options.easing;
+    this.element.style.transition = `height ${this.options.speed}ms ${this.options.easing}`;
   }
 
   /**
@@ -310,10 +311,20 @@ class Shuffle extends TinyEmitter {
    * @protected
    */
   setItemTransitions(items) {
-    const str = `all ${this.options.speed}ms ${this.options.easing}`;
+    const speed = this.options.speed;
+    const easing = this.options.easing;
+    const positionProps = this.options.useTransforms ? ['transform'] : ['top', 'left'];
+
+    // Allow users to transtion other properties if they exist in the `before`
+    // css mapping of the shuffle item.
+    const properties = positionProps.concat(
+      Object.keys(ShuffleItem.Css.HIDDEN.before).map(k => hyphenate(k)),
+    ).join();
 
     items.forEach((item) => {
-      item.element.style.transition = str;
+      item.element.style.transitionDuration = speed + 'ms';
+      item.element.style.transitionTimingFunction = easing;
+      item.element.style.transitionProperty = properties;
     });
   }