Isotope - hiding filtered items before script kicks in

Re https://github.com/desandro/isotope/issues/56

by desandro

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<p id="filters">
  <button data-filter="*">Show all</button>
  <button data-filter=".red">red</button>
  <button data-filter=".green">green</button>
  <button data-filter=".red, .green">red and green</button>
  <button data-filter=".blue">blue</button>
</p>

<div id="container">
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
</div>

CSS

#container {
  border: 1px solid;
  padding: 5px;
}

.item {
  width: 60px;
  height: 60px;
  margin: 5px;
  float: left;
}

.red { background: red; }
.green { background: green; }
.blue { background: blue; }

/* hide  blue by default */

.blue {
  opacity: 0;
}

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){
  
  var $container = $('#container');
  
  $container.isotope({
    itemSelector: '.item',
    masonry : { columnWidth: 70 },
    filter: '.red, .green'
  });
  
  $('#filters button').click(function(){
    $container.isotope({
      filter: this.getAttribute('data-filter')
    });
  });
  
});