title: make fade in fade out smoother on ng show and hide
body: <p>here's the project I'm developing. </p>
  
  <p><a href="http://test.irisalbums.com/#/photographer" rel="nofollow">Test Project Link</a></p>
  
  <p>Go to Products.</p>
  
  <p>Click/Toggle <kbd>Flush Mounts</kbd> and <kbd>Press Books</kbd></p>
  
  <p>Observe the image below fades-in and out. As you can see, the first image fades out nicely but the second one pops-up instantly. How to make them both fade smooth and nicely?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="text-center font-zero"&gt;
      &lt;a class="category" ng-class="{active: flushMount}" ng-click="flushMount = true" ng-init="flushMount = true"&gt;
          Flush Mounts
      &lt;/a&gt;
      &lt;a class="category" ng-class="{active: !flushMount}" ng-click="flushMount = false"&gt;
          Press Books
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="book-markers text-center"&gt;
          &lt;div class="book-item" ng-show="flushMount"&gt;
             ...
          &lt;/div&gt;
          &lt;div class="book-item" ng-hide="flushMount"&gt;
             ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.book-item{
      @include transition(all 0.5s ease);
      opacity: 1;
  
      &amp;.ng-hide-add, 
      &amp;.ng-hide-remove{ 
          display: inline-block !important;
      }
  
      &amp;.ng-hide{
          opacity: 0;
      }
  }
  </code></pre>