Angularjs/ui Bootstrap - Fading Out Alert On Remove

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 al

Solution 1:

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.

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:

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

Solution 2:

We have a similar setup; the template:

<div ng-controller="messages">
    <div ng-repeat="msg in messages"
        ng-animate="{enter: 'enter-slide', leave: 'leave-slide'}"
        alert type="msg.type" close="closeMsg($index)">{{msg.msg}}</div>
</div>

The controller is simple, containing the following function and the messages array:

function closeMsg(index) {
    $scope.messages[index].remove();
}

The animation definition (see ng-animate - we are using jQuery UI):

module.animation("enter-slide", function () {
    return {
        setup: function (element) {
            element.hide();
        },
        start: function (element, done, memo) {
            try{
                element.slideDown(function () {
                    done();
                });
            }
            catch(ex){}
        }
    };
});

module.animation("leave-slide", function () {
    return {
        start: function (element, done, memo) {
            element.slideUp(function () {
                done();
            });
        }
    };
});

Of course you substitute slideUp/Down() with the desired effect.