AngularJS / UI Bootstrap - desvanecimento do alerta na remoção
Estou usando Angular comBootstrap de interface do usuário. Eu criei a diretiva personalizada que envia um alerta de difusão para a matriz de alertas vinculados à exibição (processados como alertas do Bootstrap). Após o tempo limite determinado, os alertas são removidos da matriz (e, portanto, da exibição). Aqui está o código:
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);
});
}
};
});
Eu estou querendo saber se é possível adicionar um fade out (ou qualquer outra animação) para os alertas antes de removê-los? Qualquer ajuda e dicas seriam apreciadas!