insert only transitions reveal for new items

requires Outlayer that respects item.isLayoutInstant

examples/insert.html

@@ -12,7 +12,7 @@
 
 <h1>insert</h1>
 
-<p><button id="insert">Insert</button></p>
+<p><button id="insert">Insert</button> <button id="append">Append</button></p>
 
 <div id="container">
   <div class="item"><b>49</b></div>
@@ -49,6 +49,7 @@ docReady( function() {
   var container = document.querySelector('#container');
   var iso = new Isotope( container, {
     layoutMode: 'masonry',
+    transitionDuration: '0.8s',
     getSortData: {
       b: 'b parseInt'
     },
@@ -59,13 +60,18 @@ docReady( function() {
     }
   });
 
+  function getAppendedItems() {
+    return [ appendItem(), appendItem(), appendItem() ];
+  }
+
   eventie.bind( document.querySelector('#insert'), 'click', function() {
     // append 3 new items
-    var appendedItems = [];
-    appendedItems.push( appendItem() );
-    appendedItems.push( appendItem() );
-    appendedItems.push( appendItem() );
-    iso.insert( appendedItems );
+    iso.insert( getAppendedItems() );
+  });
+
+  eventie.bind( document.querySelector('#append'), 'click', function() {
+    // append 3 new items
+    iso.appended( getAppendedItems() );
   });
 
   function appendItem() {

js/isotope.js

@@ -496,7 +496,35 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector, Item, LayoutMode
     if ( !items.length ) {
       return;
     }
+    // filter new stuff
+    /*
+    // this way adds hides new filtered items with NO transition
+    // so user can't see if new hidden items have been inserted
+    var filteredInsertItems;
+    this._noTransition( function() {
+      filteredInsertItems = this._filter( items );
+      // hide all new items
+      this.hide( filteredInsertItems );
+    });
+    // */
+    // this way hides new filtered items with transition
+    // so user at least sees that something has been added
+    var filteredInsertItems = this._filter( items );
+    // hide all newitems
+    this._noTransition( function() {
+      this.hide( filteredInsertItems );
+    });
+    // */
+    // set flag
+    for ( var i=0, len = items.length; i < len; i++ ) {
+      items[i].isLayoutInstant = true;
+    }
     this.arrange();
+    // reset flag
+    for ( i=0; i < len; i++ ) {
+      delete items[i].isLayoutInstant;
+    }
+    this.reveal( filteredInsertItems );
   };
 
   var _remove = Isotope.prototype.remove;