From a4f04b42a78b30d90350d4c9c794fc3bf3ea1784 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Thu, 22 Feb 2018 16:28:59 +0100 Subject: [PATCH] notifications - better animation --- .../media/notificationsToasts.css | 20 ++++++++++++------- .../notifications/notificationsToasts.ts | 12 +++++------ 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css index bf75bd6e55b..cad4161cc5f 100644 --- a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css +++ b/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 diff --git a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts index 62d94a47f55..706fa5f008f 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts +++ b/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 { -- GitLab