remove item when transition duration = 0;

Ref desandro/masonry#372

Author: desandro

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "outlayer",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "the brains and guts of a layout library",
   "main": [
     "item.js",

item.js

@@ -364,16 +364,21 @@ Item.prototype.removeElem = function() {
   this.emitEvent( 'remove', [ this ] );
 };
 
-Item.prototype.remove = transitionProperty ? function() {
+Item.prototype.remove = function() {
+  // just remove element if no transition support or no transition
+  if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {
+    this.removeElem();
+    return;
+  }
+
   // start transition
   var _this = this;
   this.on( 'transitionEnd', function() {
     _this.removeElem();
     return true; // bind once
   });
   this.hide();
-// if no transition just remove element
-} : Item.prototype.removeElem;
+};
 
 Item.prototype.reveal = function() {
   delete this.isHidden;

test/index.html

@@ -110,6 +110,8 @@ <h2>remove</h2>
     <div class="item w2"></div>
     <div class="item w2"></div>
     <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item h2"></div>
     <div class="item"></div>
   </div>
 

test/remove.js

@@ -21,12 +21,32 @@ test( 'remove', function() {
     }
     equal( container.children.length, expectedRemovedCount, 'elements removed from DOM' );
     equal( container.querySelectorAll('.w2').length, 0, 'matched elements were removed' );
-    start();
+    setTimeout( removeNoTransition, 20 );
+    // start();
+    return true;
   });
   stop();
   olayer.remove( w2Elems );
   equal( olayer.items.length, expectedRemovedCount, 'items removed from Packery instance' );
 
+  // check items are remove with no transition
+  function removeNoTransition() {
+    // disable transition by setting transition duration to 0
+    olayer.options.transitionDuration = 0;
+    var h2Elems = container.querySelectorAll('.h2');
+    expectedRemovedCount -= h2Elems.length;
+
+    olayer.on( 'removeComplete', function( obj, removedItems ) {
+      equal( true, true, 'no transition, removeComplete event did fire' );
+      equal( removedItems.length, h2Elems.length, 'no transition, remove elems length matches 2nd argument length' );
+      equal( container.children.length, expectedRemovedCount, 'no transition, elements removed from DOM' );
+      equal( container.querySelectorAll('.h2').length, 0, 'no transition, matched elements were removed' );
+      start();
+    });
+
+    olayer.remove( h2Elems );
+  }
+
 });
 
 })();