AngularJS / UI引导程序-删除时淡出警告

Question

我在UI Bootstrap中使用Angular
。我创建了自定义指令，该指令将广播的最差消息推送到绑定到视图的警报数组中（呈现为Bootstrap警报）。在一定的超时后，警报将从阵列（因此也从视图）中删除。这是代码：

angular.module('myApp')
  .directive('alerts', function ($timeout) {
    return {
      restrict: 'E',
      templateUrl: 'views/alerts.html',
      scope: true, /*share scope between alerts directives*/
      link: function (scope) {
        scope.alerts = [];

        scope.$on('alert', function (event, alert) {
          var newLength = scope.alerts.push({type: alert.type, msg: alert.message});

          $timeout(function() {
            scope.alerts.splice((newLength-1), 1);
          }, 3000);
        });
      }
    };
  });

我想知道是否可以在删除警报之前向警报添加淡出（或其他动画）？任何帮助和提示，将不胜感激！

Answer 1

在Angular中> 1.1.5

您可以使用angular的内置动画功能。基本上，您只需data-ng-animate="'<animation class>'"在重复元素上添加一个。

看到这个优秀的post -in-angularjs动画或@Nikos的回答。

在Angular 1.0.7中（稳定）

据我所知，没有动画支持。但是，您可以自己制作动画。我不是专业人士，所以这可能不是最好的方法。

创建第二个$timeout添加一个“淡出CSS3”动画，该动画在第一个超时触发之前启动：

1. 创建CSS3动画类以隐藏警报（可能已经来自引导程序）

   @keyframes fadeOut
   

   {
   from { opacity: 1.0; }
   to { opacity: 0.0; }
   }
   
   

   @-webkit-keyframes fadeOut
   {
   from { opacity: 1.0 }
   to { opacity: 0.0 }
   }

   .fade-out
   {
   animation: fadeOut 2s infinite;
   -webkit-animation: fadeOut 2s infinite;
   }

2. 添加第二个$ timeout：

   $timeout(function() { alert.expired = true; }, 2000);
   

3. 在模板中，添加条件类ng-class：

   <div ng-repeat="alert in alerts" ng-class="{'fade-out': alert.expired}">...</div>