AngularJS/UI Bootstrap - 删除时淡出警报

Question

我正在使用Angular和UI Bootstrap.我已经创建了自定义指令,将广播的alerst推送到绑定到视图的警报数组(呈现为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 -animation-in-angularjs或@Nikos的答案.

在Angular 1.0.7(稳定)

据我所知,没有动画支持.但是,您可以自己构建动画.我不是专业人士,所以这可能不是最好的方法.

创建第二个$timeout添加'淡出CSS3'动画,在第一个超时触发之前启动:

1. 创建用于隐藏警报的CSS3动画类(可能已经来自bootstrap)

   @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(function() { alert.expired = true; }, 2000);
   

3. 在您的模板中添加一个条件类ng-class:

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