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

Question

我将 Angular 与 UI Bootstrap 一起使用.我创建了自定义指令，将广播警报推送到绑定(bind)到 View 的警报数组(呈现为 Bootstrap 警报)。在一定的超时后，警报将从数组中删除(并因此从 View 中删除)。这是代码:

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>'"在重复元素上。

查看此优秀帖子 animation-in-angularjs或@Nikos 的回答。

在 Angular 1.0.7(稳定版)中

据我所知没有动画支持。但是，您可以自己构建动画。我不是 Angular 专家，所以这可能不是最好的方法。

创建第二个 $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:

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

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

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