如何向angularjs uib alert指令添加动画

我想为推送到阵列中的新警报添加淡入动画，并为取消的警报添加淡出动画

警报在5秒后自动解除

我已经包括了

angular animate

ui-bootstrap

和

ui-bootstrap-tpls

库

我怎样才能让这些动画工作

请参见演示：

HTML

---

答案基于Pankaj的评论

这让我想到了这篇文章：

• 将

  class='repeat-item'

  添加到

  。

  元素
• 为动画效果添加了适当的样式

  <style type="text/css">
  .repeat-item.ng-enter,
  .repeat-item.ng-leave {
    -webkit-transition: 0.5s linear all;
    transition: 0.5s linear all;
  }
  
  .repeat-item.ng-enter,
  .repeat-item.ng-leave.ng-leave-active {
    opacity: 0;
  }
  
  .repeat-item.ng-leave,
  .repeat-item.ng-enter.ng-enter-active {
    opacity: 1;
  }
  </style>
  

  
  .重复-item.ng-enter，
  .重复-item.ng-离开{
  -webkit过渡：0.5s线性全部；
  过渡：0.5s线性所有；
  }
  .重复-item.ng-enter，
  .重复-item.ng-leave.ng-leave-active{
  不透明度：0；
  }
  .重复-item.ng-leave，
  .重复-item.ng-enter.ng-enter-active{
  不透明度：1；
  }
  

请参阅工作演示：

一个小故障

---

首次单击以添加警报时，动画中不会出现淡入淡出。在那之后，一切似乎都很好。

请参考将对您有所帮助。@PankajParkar，除了一个小错误外，这很有帮助。请看下面我的答案。谢谢！stackoverflow中充斥着过时的答案，这些答案不适用于angular 1.5.x。这很有效。

(function() {

  var app = angular.module("myApp", ['ui.bootstrap', 'ngAnimate']);

  app.controller("MainController", function($scope) {

    $scope.alerts = [];

    $scope.msg = "No Animation!";

    $scope.addAlert = function(msg, type) {
      $scope.alerts.push({
        msg: msg,
        type: type
      });
    };

  });

}());

<style type="text/css">
.repeat-item.ng-enter,
.repeat-item.ng-leave {
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
  opacity: 0;
}

.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
  opacity: 1;
}
</style>