AngularJS/UI Bootstrap - fading out alert on remove

Question

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 Boot

Answer 1

In Angular > 1.1.5

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

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

In Angular 1.0.7 (stable)

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.

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

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

2. Add a 2nd $timeout:

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

3. In your template add a conditional class with ng-class:

   ...