Isotope - hiding filtered items before script kicks in

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

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 green initially-hidden"></div>
  <div class="item green"></div>
  <div class="item red blue "></div>
  <div class="item red"></div>
  <div class="item green red"></div>
  <div class="item blue green"></div>
  <div class="item red blue initially-hidden"></div>
  <div class="item green"></div>
  <div class="item blue red"></div>
  <div class="item red"></div>
  <div class="item green blue"></div>
  <div class="item blue"></div>
  <div class="item red blue"></div>
  <div class="item green red"></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; }

.initially-hidden { background:black !important; } // Just for visually testing

/**** 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.find('.item:not(.initially-hidden)').addClass('initially-shown');
  
  $container.isotope({
    itemSelector: '.item',
    masonry : { columnWidth: 70 },
    filter: '.initially-shown'
  });
  
  $('#filters button').click(function(){
    $container.isotope({
      filter: this.getAttribute('data-filter')
    });
  });
  
});