Angular + rxjs. Анимация добавления child элемента

21 апреля 2021, 08:10

Доброго времени суток.

Имею компонент:

class NotificatorComponent {
    public notifications$: Subject<Array<Notification>> =
        new Subject();
// ...
    public removeNotification(notificationId: number): void {
        const notification: Notification =
            this.notifications.find(x => x.id === notificationId);
        const notificationIndex: number =
            this.notifications.indexOf(notification);
        this.notifications.splice(notificationIndex, 1);
        this.whenUpdateNotifications$.next(this.notifications);
    }
}

В рамках которого используются массив из моделей:

interface Notification {
    id?: number;
    message: string;
    type: string;
    delay?: number;
}

И визуальный шаблон для него (pug-минифицированный html):

.notifications
    .notification(
        *ngFor='let notification of (notifications$ | async)',
        [ngClass]='notification.type.toLowerCase()'
    )
        .notification-header {{ notification.type }}
            span.close(
                (click)='removeNotification(notification.id)'
            ) &times;
        .notification-body {{ notification.message }}

Элементы в notifications$ добавляются динамически в процессе работы приложения.

Хочу организовать следующее:

При добавлении новой нотификации (пуша в сабж notifications$) чтобы визуальный элемент появлялся с анимацией (например fade-in).

Пробовал через css-анимации

notification:last-of-type
        animation fadein 0.5s
        animation-iteration-count 1
@keyframes fadein 
  from 
    bottom 0
    opacity 0
  to 
    bottom 30px
    opacity 1

Но в данном случае проблема случается при удалении, что последний элемент повторяет анимацию (оно и логично, ведь селектор описан так) - гиф с ошибкой

Вопрос:

Не могли бы вы посоветовать способ описать анимацию появления элементов в рамках данной реализации (или может другой реализации)?
Не могли бы подсказать способ организации "времени жизни" элемента - то есть чтобы 1 элемент (из notification$) имел определенное время жизни, а после чего по анимации удалялся (как визуально, так и из массивов)?

Answer 1

Ответ на 2й вопрос:

С помощью rxjs:

    private whenNotificationDismissDelayed$: Subject<number> =
        new Subject();

    constructor(
    ) {
        this.whenNotificationDismissDelayed$
            .pipe(
                takeUntil(this.whenComponentDestroy$),
                delay(5 * 1000),
            )
            .subscribe(notificationIndex => {
                this.removeNotification(notificationIndex);
            });
        this.whenNotificationRecieved$
            .pipe(
                // ...
            )
            .subscribe(notification => {
                // ...
                this.whenNotificationDismissDelayed$.next(notification.id);
            });
    }