AngularJS/UI Bootstrap - 移除时淡出警报 [英] AngularJS/UI Bootstrap - fading out alert on remove

问题描述

我将 Angular 与 UI Bootstrap 一起使用.我创建了自定义指令，将广播警报推送到绑定到视图的警报数组中(呈现为 Bootstrap 警报).在特定超时后，警报将从阵列中删除(因此从视图中删除).代码如下:

I am using Angular with UI Bootstrap. I've created the custom directive that pushes broadcasted alerst into the array of alerts that are bound to the view (rendered as Bootstrap alerts). After the certain timeout the alerts get removed from the array (and hence from the view). Here is the code:

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

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

I am wondering whether it is possible to add a fade out(or indeed any other animation) to the alerts prior to removing them? Any help and tips would be appreciated!

推荐答案

In Angular > 1.1.5

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

查看这篇优秀的帖子 animation-in-angularjs或@Nikos 的回答.

See this excelent post animation-in-angularjs or the answer from @Nikos.

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

is a as far as I know no animation support. However you could build the animation yourself. I'm no angular pro, so this might not be the best approach.

创建第二个 $timeout，添加在第一次超时触发之前开始的淡出 CSS3"动画:

Create a second $timeout that adds a 'fade out CSS3' animation that kicks in before the first timeout triggers:

1. 创建用于隐藏警报的 CSS3 动画类(可能已经有来自引导程序)

1. Create CSS3 animation classes for hiding an alert (there might be already from 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;
}

添加第二个 $timeout:

Add a 2nd $timeout:

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

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

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

这篇关于AngularJS/UI Bootstrap - 移除时淡出警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！