notifications - better animation

src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css

@@ -23,12 +23,18 @@
 
 .monaco-workbench > .notifications-toasts .notification-toast {
 	margin: 5px; /* enables separation and drop shadows around toasts */
-	position: relative;
 
-	-webkit-transition:	left 300ms ease-in;
-	-ms-transition:		left 300ms ease-in;
-	-moz-transition:	left 300ms ease-in;
-	-khtml-transition:	left 300ms ease-in;
-	-o-transition:		left 300ms ease-in;
-	transition:			left 300ms ease-in;
+	transform: translateY(100%); /* move the notification 50px to the bottom (to prevent bleed through) */
+	transition:	transform 200ms ease-out;
+	will-change: transform; /* force a separate layer for the toast to speed things up */
+}
+
+.monaco-workbench > .notifications-toasts .notification-toast.notification-fade-in {
+	z-index: -1; /* draw the notification below the current one */
+	transform: none;
+}
+
+.monaco-workbench > .notifications-toasts .notification-toast.notification-fade-in-done {
+	transform: none;
+	transition:	none;
 }
\ No newline at end of file

src/vs/workbench/browser/parts/notifications/notificationsToasts.ts

@@ -8,7 +8,7 @@
 import 'vs/css!./media/notificationsToasts';
 import { INotificationsModel, NotificationChangeType, INotificationChangeEvent, INotificationViewItem, NotificationViewItemLabelKind } from 'vs/workbench/common/notifications';
 import { IDisposable, dispose, toDisposable } from 'vs/base/common/lifecycle';
-import { addClass, removeClass, isAncestor } from 'vs/base/browser/dom';
+import { addClass, removeClass, isAncestor, addDisposableListener } from 'vs/base/browser/dom';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { NotificationsList } from 'vs/workbench/browser/parts/notifications/notificationsList';
 import { Dimension } from 'vs/base/browser/builder';
@@ -170,11 +170,11 @@ export class NotificationsToasts extends Themable {
 		this.notificationsToastsVisibleContextKey.set(true);
 
 		// Animate In
-		notificationToastContainer.style.left = `${NotificationsToasts.MAX_DIMENSIONS.width}px`;
-		const animationHandle = setTimeout(() => {
-			notificationToastContainer.style.left = '0px';
-		});
-		itemDisposeables.push(toDisposable(() => clearTimeout(animationHandle)));
+		addClass(notificationToastContainer, 'notification-fade-in');
+		itemDisposeables.push(addDisposableListener(notificationToastContainer, 'transitionend', () => {
+			removeClass(notificationToastContainer, 'notification-fade-in');
+			addClass(notificationToastContainer, 'notification-fade-in-done');
+		}));
 	}
 
 	private removeToast(item: INotificationViewItem): void {