如何将动画添加到 angularjs uib-alert 指令答案

【问题标题】：How to add animation to angularjs uib-alert directive如何将动画添加到 angularjs uib-alert 指令
【发布时间】：2016-02-11 17:23:41
【问题描述】：

我想为推入数组的新警报添加淡入动画，为已关闭的警报添加淡出动画。

警报会在 5 秒后自动消失。

我已经包含了 angular-animate ui-bootstrap 和 ui-bootstrap-tpls 库。

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

查看演示：http://plnkr.co/edit/ecbCA7h2zVA4XnvUHfFX?p=preview

HTML

<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>Alert With Animation</h1>
    <uib-alert 
      ng-repeat="alert in alerts" 
      type="{{alert.type}}" 
      dismiss-on-timeout="5000" 
      close="alerts.splice($index, 1);">{{alert.msg}}
    </uib-alert>
    <input type='text' ng-model='msg' />
    <button ng-click="addAlert(msg,'danger')">Add Alert</button>
  </body>

</html>

脚本

(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
      });
    };

  });

}());

【问题讨论】：

请参考this answer会帮助你。
@PankajParkar，除了一个小错误之外，这很有帮助。请在下面查看我的答案。

标签： angularjs angularjs-directive angular-ui-bootstrap css-animations ng-animate

【解决方案1】：

答案基于 Pankaj 的评论。

这导致我看到这篇文章：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

将class='repeat-item' 添加到<uib-alert>..</uib-alert> 元素。

为动画效果添加了适当的样式。

<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>

查看工作演示：https://plnkr.co/edit/CK2lV4mBVGs8q5gyYklE?p=preview

一个小故障

当您第一次单击添加警报时，没有淡入动画。之后，一切似乎都正常了。

【讨论】：

谢谢！ stackoverflow 包含不适用于角度 1.5.x 的过时答案。这很好用。