title: ng-show with ng-animate not working correctly
body: <p>I cannot see my mistake within the following snippet. The goal is to have the divs fade in and out whereas my result is that they instantly hide/show. Could someone be as kind as to point out my mistake as I cannot see it.</p>
  
  <p>PLNKR- <a href="http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview" rel="nofollow">http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview</a></p>
  
  <p><strong>HTML/Script</strong></p>
  
  <pre><code>&lt;body ng-controller="test"&gt;
  
      &lt;p&gt;
        &lt;button ng-click="show=!show"&gt;Toggle&lt;/button&gt;
      &lt;/p&gt;
  
      &lt;div ng-show="show" 
           class="blue-div animate-show"&gt;A&lt;/div&gt;
  
      &lt;div ng-hide="show" 
           class="green-div animate-show"&gt;B&lt;/div&gt;
  
      &lt;script&gt;
        angular.element(document).ready(function(){
  
          var app=angular.module("app",[]);
  
          app.controller("test",function($scope){
              $scope.show=false;
          });
  
          angular.bootstrap(document,["app"]);
  
        });
      &lt;/script&gt;
  
    &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.blue-div{
    width:100%;
    height:200px;
    background-color:blue;
  }
  
  .green-div{
    width:100%;
    height:200px;
    background-color:green;
  }
  
  .animate-show {
    -webkit-transition:all linear 1s;
    transition:all linear 1s;
    opacity:1;
  }
  
  .animate-show.ng-hide-add,
  .animate-show.ng-hide-remove {
    display:block!important;
  }
  
  .animate-show.ng-hide {
    opacity:0;
  }
  </code></pre>