fix notification close animation

src/Umbraco.Web.UI.Client/src/backoffice/components/backoffice-notification-container.element.ts

@@ -46,10 +46,6 @@ export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin(
 		});
 	}
 
-	private _closedNotificationHandler(notificationHandler: UmbNotificationHandler) {
-		notificationHandler.close();
-	}
-
 	disconnectedCallback(): void {
 		super.disconnectedCallback();
 		this._notificationSubscription?.unsubscribe();
@@ -61,12 +57,7 @@ export class UmbBackofficeNotificationContainer extends UmbContextConsumerMixin(
 				${repeat(
 					this._notifications,
 					(notification: UmbNotificationHandler) => notification.key,
-					(notification) => html`<uui-toast-notification
-						color="${notification.color}"
-						.autoClose="${notification.duration}"
-						@closed="${() => this._closedNotificationHandler(notification)}">
-						${notification.element}
-					</uui-toast-notification>`
+					(notification) => html`${notification.element}`
 				)}
 			</uui-toast-notification-container>
 		`;

src/Umbraco.Web.UI.Client/src/core/services/notification/notification-handler.ts

@@ -1,3 +1,4 @@
+import { UUIToastNotificationElement } from '@umbraco-ui/uui';
 import { v4 as uuidv4 } from 'uuid';
 import type { UmbNotificationOptions, UmbNotificationData, UmbNotificationColor } from './';
 
@@ -39,18 +40,28 @@ export class UmbNotificationHandler {
 			this._closeResolver = res;
 		});
 
-		this._createLayoutElement();
+		this._createElement();
 	}
 
 	/**
 	 * @private
 	 * @memberof UmbNotificationHandler
 	 */
-	private _createLayoutElement() {
+	private _createElement() {
 		if (!this._elementName) return;
-		this.element = document.createElement(this._elementName);
-		this.element.data = this._data;
-		this.element.notificationHandler = this;
+
+		const notification: UUIToastNotificationElement = document.createElement('uui-toast-notification');
+
+		notification.color = this.color;
+		notification.autoClose = this.duration;
+
+		const element: any = document.createElement(this._elementName);
+		element.data = this._data;
+		element.notificationHandler = this;
+
+		notification.appendChild(element);
+
+		this.element = notification;
 	}
 
 	/**
@@ -59,6 +70,8 @@ export class UmbNotificationHandler {
 	 */
 	public close(...args: any) {
 		this._closeResolver(...args);
+		// TODO: make public close method on uui-toast-notification
+		this.element._makeClose();
 	}
 
 	/**

src/Umbraco.Web.UI.Client/src/core/services/notification/notification.service.ts

@@ -31,7 +31,7 @@ export class UmbNotificationService {
 	 */
 	private _open(options: UmbNotificationOptions<UmbNotificationData>): UmbNotificationHandler {
 		const notificationHandler = new UmbNotificationHandler(options);
-		notificationHandler.onClose().then(() => this._close(notificationHandler.key));
+		notificationHandler.element.addEventListener('closed', () => this._handleClosed(notificationHandler));
 
 		this._notifications.next([...this._notifications.getValue(), notificationHandler]);
 
@@ -47,6 +47,16 @@ export class UmbNotificationService {
 		this._notifications.next(this._notifications.getValue().filter((notification) => notification.key !== key));
 	}
 
+	/**
+	 * @private
+	 * @param {string} key
+	 * @memberof UmbNotificationService
+	 */
+	private _handleClosed(notificationHandler: UmbNotificationHandler) {
+		notificationHandler.element.removeEventListener('closed', () => this._handleClosed(notificationHandler));
+		this._close(notificationHandler.key);
+	}
+
 	/**
 	 * Opens a notification that automatically goes away after 6 sek.
 	 * @param {UmbNotificationColor} color