AngularJS / UI引导 - 上删除淡出警报 [英] AngularJS/UI Bootstrap - fading out alert on remove

问题描述

我使用的角度与 UI引导。我创建是推动alerst广播到警报的数组绑定到视图（呈现为引导警报）自定义指令。一定超时后得到警报从阵列中删除（因此从视图）。这里是code：

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

我之前除去它们不知道是否有可能增加一个淡出（或实际上任何其他动画）的警报？任何帮助和提示将AP preciated！

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!

推荐答案

您可以使用角度内置的动画功能。你基本上只需添加数据-NG-动画='＆LT;动画类＆GT;'。重复的元素

In Angular > 1.1.5

You can use angular's built-in animation feature. You basically just add a data-ng-animate="'<animation class>'" on the repeated element.

请参阅此外观极好职位<一个href=\"http://www.yearofmoo.com/2013/04/animation-in-angularjs.html#animating-ng-repeat\">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.

创建第二个 $超时，增加了一个淡出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;
}

添加第二个$超时：

Add a 2nd $timeout:

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

在您的模板添加一个条件类纳克级：

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

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