Как отложить открытие в оверклейке CDK?

Question

Я использую наложение CDK для отображения «всплывающего окна», когда пользователь наводит курсор на элемент списка. В настоящее время я открываю всплывающее окно, когда срабатывает событие mouseenter.

Мой код:

//component.html
<mat-list-item *ngFor="let item of itemList" (mouseenter)="showItemDetail(item)">
    {{item.display}}
</mat-list-item>




//component.ts
showItemDetail(item: IItemDto, event: MouseEvent) {
        this.hideItemDetail(); // Closes any open overlays
        this.itemDetailOverlayRef = this.itemDetailOverlayService.open(item);
}



//itemDetailOverlayService.ts
open(item: IItemDto) {

        // Returns an OverlayRef (which is a PortalHost)

        const overlayRef = this.createOverlay(item);
        const dialogRef = new ItemDetailOverlayRef(overlayRef);
        // Create ComponentPortal that can be attached to a PortalHost
        const itemDetailPortal = new ComponentPortal(ItemDetailOverlayComponent);
        const componentInstance = this.attachDialogContainer(overlayRef, item, dialogRef);
        // Attach ComponentPortal to PortalHost
        return dialogRef;
}


private attachDialogContainer(overlayRef: OverlayRef, item: IItemDto, dialogRef: ItemDetailOverlayRef) {
        const injector = this.createInjector(item, dialogRef);
        const containerPortal = new ComponentPortal(ItemDetailOverlayComponent, null, injector);
        const containerRef: ComponentRef<ItemDetailOverlayComponent> = overlayRef.attach(containerPortal);
        return containerRef.instance;
}

Обратите внимание, что мой оверлей зависит от данных из элемента списка.

Как я могу задержать showItemDetail(), чтобы открыть оверлей только через 2 с? Имейте в виду, что одновременно может быть открыт только один поповер.

setTimeout(), очевидно, не будет работать, так как несколько всплывающих окон будут открыты, если пользователь проведет мышью по списку элементов.

Answer 1

Решено открытием наложения без задержки при создании эффекта задержки с использованием анимации / ключевых кадров css:

.container {
    animation: fadeIn 1.5s linear;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}