closes #6069

public/src/modules/alerts.js

@@ -63,7 +63,7 @@ define('alerts', ['translator', 'components', 'benchpress'], function (translato
 	function updateAlert(alert, params) {
 		alert.find('strong').html(params.title);
 		alert.find('p').html(params.message);
-		alert.attr('class', 'alert alert-dismissable alert-' + params.type);
+		alert.attr('class', 'alert alert-dismissable alert-' + params.type + ' clearfix');
 
 		clearTimeout(parseInt(alert.attr('timeoutId'), 10));
 		if (params.timeout) {
@@ -102,6 +102,23 @@ define('alerts', ['translator', 'components', 'benchpress'], function (translato
 		}, timeout);
 
 		alert.attr('timeoutId', timeoutId);
+
+		// Reset and start animation
+		alert.css('transition-property', 'none');
+		alert.removeClass('animate');
+
+		setTimeout(function () {
+			alert.css('transition-property', '');
+			alert.css('transition', 'width ' + (timeout + 450) + 'ms linear, background-color ' + (timeout + 450) + 'ms ease-in');
+			alert.addClass('animate');
+		}, 50);
+
+		// Handle mouseenter/mouseleave
+		alert
+			.on('mouseenter', function () {
+				$(this).css('transition-duration', 0);
+				console.log(this);
+			});
 	}
 
 	return module;