title: Tell ngAnimate to only animate ngShow/ngHide
body: <p>I have an AngularJS 1.2.2 web application with a <code>&lt;div&gt;</code> that I show/hide based on some <code>$scope</code> property. Using the <code>ngAnimate</code> module, I animate the showing and hiding of the <code>&lt;div&gt;</code>.</p>
  
  <pre><code>&lt;div id="square" ng-show="showSquare" class="animate-shiny"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I also have a class I want to place on this <code>&lt;div&gt;</code> and for this I use <code>ngClass</code>. </p>
  
  <pre><code>&lt;div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And as it so happens, sometimes that class gets applied at the same moment as when the <code>&lt;div&gt;</code> is shown/hidden. This causes the show/hide animation to not work anymore, apparantly it finds <code>ngClass</code> more interesting to animate, even though I don't want to use <code>ngAnimate</code> for that animation.</p>
  
  <p><a href="http://plnkr.co/edit/4ZdKoNG9oU0DYjYHhUj4?p=preview">Here's a Plnkr that demonstrates the behavior</a>. Clicking the show/hide button works great, clicking the make cool button works great, but the button that combines these two causes the show/hide animation to break.</p>
  
  <p>How do I fix this? And can I do it without manually addressing <code>$animate</code>?</p>
  
  <p>Thanks in advance!</p>