title: ngAnimate on ngShow. Preventing animation when it starts first time
body: <p>I was playing around with recently added angular.js animations feature, and this doesn't work as desired</p>
  
  <pre><code>&lt;style&gt;
      .myDiv{
          width:400px;
          height:200px;
          background-color:red;
      }
      .fadeIn-setup,.fadeOut-setup {
        -webkit-transition: 1s linear opacity;
        -moz-transition: 1s linear opacity;
        -o-transition: 1s linear opacity;
        transition: 1s linear opacity;
      }
      .fadeIn-setup{
        opacity:0;
      }
      .fadeOut-setup{
        opacity:1;
      }
      .fadeIn-setup.fadeIn-start {
        opacity: 1;
      }
      .fadeOut-setup.fadeOut-start{
          opacity:0;
      }
  &lt;/style&gt;
  
  &lt;div ng-app&gt;
      &lt;div ng-controller='ctrl'&gt;
         &lt;input type='button' value='click' ng-click='clicked()' /&gt;  
         &lt;div ng-show="foo == true"  class='myDiv' ng-animate="{show: 'fadeIn', hide:'fadeOut'}"&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  
  function ctrl($scope){
      $scope.foo = false;
      $scope.clicked = function(){
         $scope.foo = !($scope.foo);
      }
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Kx4TS/1">http://jsfiddle.net/Kx4TS/1</a></p>
  
  <p>it spoils away myDiv on the <code>dom.ready</code> and starts it fading out. Whereas it initially should be hidden. How to fix that?</p>