如何在 CDK overplay 中延迟打开？

Posted 2023-03-13

【中文标题】如何在 CDK overplay 中延迟打开？

【英文标题】：How to delay opening in CDK overplay?

【发布时间】：2019-06-16 17:49:58

【问题描述】：

当用户将鼠标悬停在列表项上时，我正在使用 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() 显然不起作用，因为如果用户将鼠标拖过项目列表，则会打开多个弹出框。

【参考方案1】：

通过在使用 css 动画/关键帧创建延迟效果时立即打开叠加层解决：

.container 
    animation: fadeIn 1.5s linear;


@keyframes fadeIn 
    0% 
        opacity: 0;
    

    75% 
        opacity: 0;
    

    100% 
        opacity: 1;