title: Angular UI Alerts: Fade In and Fade Out not working
body: <p><a href="http://plnkr.co/edit/NHThZWGANMcYYK8WtZM9?p=preview" rel="nofollow">In this plunk</a>, I'm trying to fade in alerts when they are created, and fade out when they are closed (either manually or automatically). I'm using ng-animate, but the animation is ignored. Any ideas?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;style&gt;
  .fade.ng-enter {
    transition:0.5s linear all;
    opacity:0;
  }
  
  .fade.ng-enter.ng-enter-active {
    opacity:1;
  }
  
  .fade.ng-leave {
    transition:0.5s linear all;
    opacity:1;
  }
  .fade.ng-leave.ng-leave-active {
    opacity:0;
  }
  &lt;/style&gt;
    &lt;button ng-click="addAlert()"&gt;Add Alert&lt;/button&gt;
    &lt;alert ng-repeat="alert in alerts" type="{{alert.type}}"  data-ng-animate="'fade'"
           close="closeAlert($index)"&gt;
      {{alert.msg}}&lt;/alert&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap','ngAnimate']);
  app.controller('ctl', function ($scope) {
  
    $scope.alerts = [];
    var count = 1;
  
    $scope.closeAlert = function(index) {
        $scope.alerts.splice(index, 1);
    };
  
    $scope.addAlert = function() {
        $scope.alerts.push ( { type: 'info', msg: 'Information Only ' + count++ } );
  
    };
  });
  </code></pre>