Fix `before` styles not applied when the item didn’t move. Fixes #133

dist/shuffle.js

@@ -789,6 +789,7 @@ var Shuffle = function () {
         // If the item will not change its position, do not add it to the render
         // queue. Transitions don't fire when setting a property to the same value.
         if (__WEBPACK_IMPORTED_MODULE_6__point__["a" /* default */].equals(currPos, pos) && currScale === __WEBPACK_IMPORTED_MODULE_7__shuffle_item__["a" /* default */].Scale.VISIBLE) {
+          item.applyCss(__WEBPACK_IMPORTED_MODULE_7__shuffle_item__["a" /* default */].Css.VISIBLE.before);
           callback();
           return;
         }
@@ -857,6 +858,7 @@ var Shuffle = function () {
         // after the transitionend event because the transitionend could be
         // canceled if another animation starts.
         if (item.scale === __WEBPACK_IMPORTED_MODULE_7__shuffle_item__["a" /* default */].Scale.HIDDEN) {
+          item.applyCss(__WEBPACK_IMPORTED_MODULE_7__shuffle_item__["a" /* default */].Css.HIDDEN.before);
           callback();
           return;
         }

src/shuffle.js

@@ -503,6 +503,7 @@ class Shuffle {
       // If the item will not change its position, do not add it to the render
       // queue. Transitions don't fire when setting a property to the same value.
       if (Point.equals(currPos, pos) && currScale === ShuffleItem.Scale.VISIBLE) {
+        item.applyCss(ShuffleItem.Css.VISIBLE.before);
         callback();
         return;
       }
@@ -561,6 +562,7 @@ class Shuffle {
       // after the transitionend event because the transitionend could be
       // canceled if another animation starts.
       if (item.scale === ShuffleItem.Scale.HIDDEN) {
+        item.applyCss(ShuffleItem.Css.HIDDEN.before);
         callback();
         return;
       }

test/test.js

@@ -580,6 +580,41 @@ describe('shuffle', function () {
     });
   });
 
+  describe('Custom shuffle item styles', function () {
+    var original = Shuffle.ShuffleItem.Css;
+
+    beforeEach(function (done) {
+      appendFixture('regular').then(done);
+    });
+
+    afterEach(function () {
+      Shuffle.ShuffleItem.Css = original;
+      removeFixture();
+    });
+
+    it('will apply before and after styles even if the item will not move', function () {
+      Shuffle.ShuffleItem.Css.INITIAL.opacity = 0;
+      instance = new Shuffle(fixture, { speed: 0 });
+
+      // The layout method will have already set styles to their 'after' states
+      // upon initialization. Reset them here.
+      instance.items.forEach(function (item) {
+        item.applyCss(Shuffle.ShuffleItem.Css.INITIAL);
+      });
+
+      instance.items.forEach(function (item) {
+        expect(item.element.style.opacity).to.equal('0');
+      });
+
+      instance._layout(instance.items);
+      instance._processQueue();
+
+      instance.items.forEach(function (item) {
+        expect(item.element.style.opacity).to.equal('1');
+      });
+    });
+  });
+
   describe('the sorter', function () {
     var items;
     var clone;