ng-show with ng-animate not working correctly

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.

PLNKR- http://plnkr.co/edit/c0HgL56yOqrznIkfbmsR?p=preview

HTML/Script

<body ng-controller="test">

    <p>
      <button ng-click="show=!show">Toggle</button>
    </p>

    <div ng-show="show" 
         class="blue-div animate-show">A</div>

    <div ng-hide="show" 
         class="green-div animate-show">B</div>

    <script>
      angular.element(document).ready(function(){

        var app=angular.module("app",[]);

        app.controller("test",function($scope){
            $scope.show=false;
        });

        angular.bootstrap(document,["app"]);

      });
    </script>

  </body>

CSS

.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;
}

Solution

Change your css class to this:

.animate-show {
  display:block!important;
  -moz-transition:all linear 1s;
  -o-transition:all linear 1s;
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
  opacity:1;
}

http://plnkr.co/edit/SRXY4Xr8ibm6nLkkp9XN?p=preview

essentially, it wants:

display:block!important;