Fix message not removed from dom when transitionend fails to fire.

README.md

@@ -63,6 +63,9 @@ Call `config` to set the default configuration options for angular-notify.  The
 * `position` - The default position of each message.  `center`, `left` and `right` are the supported values.
 * `container` - The default element that contains each notification.  Defaults to `document.body`.
 * `maximumOpen` - The maximum number of total notifications that can be visible at one time.  Older notifications will be closed when the maximum is reached.
+* `cleanupTimeout` - A timeout that cleans up the DOM after the message has faded out. This does not normally need to be set, but if you change the opacity transition duration
+in `.cg-notify-message` you may want to adjust this so that the message isn't suddenly
+removed before the fade-out transition is completed.
 
 ### notify.closeAll()
 

angular-notify.js

@@ -8,6 +8,7 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
         var position = 'center';
         var container = document.body;
         var maximumOpen = 0;
+        var cleanupTimeout = 500;
 
         var messageElements = [];
         var openNotificationsScope = [];
@@ -77,6 +78,11 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
                 scope.$close = function(){
                     templateElement.css('opacity',0).attr('data-closing','true');
                     layoutMessages();
+                    // add a cleanup handler for the templateElement in case the transitionend event is not fired (e.g. the transition is 
+                    // interrupted by the browser).
+                    $timeout(function() {
+                        templateElement.remove();
+                    }, cleanupTimeout);
                 };
 
                 var layoutMessages = function(){
@@ -142,6 +148,7 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
             position = !angular.isUndefined(args.position) ? args.position : position;
             container = args.container ? args.container : container;
             maximumOpen = args.maximumOpen ? args.maximumOpen : maximumOpen;
+            cleanupTimeout = args.cleanupTimeout ? args.cleanupTimeout : cleanupTimeout;
         };
 
         notify.closeAll = function(){

dist/angular-notify.js

@@ -8,6 +8,7 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
         var position = 'center';
         var container = document.body;
         var maximumOpen = 0;
+        var opacityAnimationTimeout = 500;
 
         var messageElements = [];
         var openNotificationsScope = [];
@@ -77,6 +78,11 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
                 scope.$close = function(){
                     templateElement.css('opacity',0).attr('data-closing','true');
                     layoutMessages();
+                    // add a cleanup handler for the templateElement in case the transitionend event is not fired (e.g. the transition is 
+                    // interrupted by the browser).
+                    $timeout(function() {
+                        templateElement.remove();
+                    }, opacityAnimationTimeout);
                 };
 
                 var layoutMessages = function(){
@@ -142,6 +148,7 @@ angular.module('cgNotify', []).factory('notify',['$timeout','$http','$compile','
             position = !angular.isUndefined(args.position) ? args.position : position;
             container = args.container ? args.container : container;
             maximumOpen = args.maximumOpen ? args.maximumOpen : maximumOpen;
+            opacityAnimationTimeout = args.opacityAnimationTimeout ? args.opacityAnimationTimeout : opacityAnimationTimeout;
         };
 
         notify.closeAll = function(){