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

一尘不染

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

angularjs

我在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);
        });
      }
    };
  });

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

阅读 201

2020-07-04

共1个答案

一尘不染

在Angular中> 1.1.5

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

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

在Angular 1.0.7中（稳定）

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

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

创建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;
}

添加第二个$ timeout：

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

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

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

2020-07-04