PrimeNG v12 为p-component-overlay-leave添加CSS动画解决遮罩不消失

问题根因 #

你的代码存在两处问题导致遮罩无法正常隐藏：

• 离开动画的animation属性填充值拼写错误：forward是无效值，正确值为forwards
• 仅声明了动画调用规则，没有定义对应的@keyframes关键帧，浏览器无法执行具体的样式过渡逻辑，动画完全不生效。

修复方案 #

将以下完整CSS代码添加到项目全局样式文件（styles.css/styles.scss，注意不要放在组件私有样式中，PrimeNG遮罩默认挂载到<body>节点下，组件局部样式无法命中）：

/* 遮罩进入动画 */
.p-component-overlay-enter {
    animation: p-component-overlay-enter-animation 150ms ease forwards;
}

/* 修正后的遮罩离开动画 */
.p-component-overlay-leave {
    animation: p-component-overlay-leave-animation 150ms ease forwards;
}

/* 进入动画关键帧：透明度从0过渡到1 */
@keyframes p-component-overlay-enter-animation {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 离开动画关键帧：透明度从1过渡到0 */
@keyframes p-component-overlay-leave-animation {
    from { opacity: 1; }
    to { opacity: 0; }
}

补充说明 #

• 如果需要把样式写在组件内部，需要加上Angular视图穿透标识，示例：

  :host ::ng-deep .p-component-overlay-enter {
    animation: p-component-overlay-enter-animation 150ms ease forwards;
  }
  :host ::ng-deep .p-component-overlay-leave {
    animation: p-component-overlay-leave-animation 150ms ease forwards;
  }
  :host ::ng-deep @keyframes p-component-overlay-enter-animation {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  :host ::ng-deep @keyframes p-component-overlay-leave-animation {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  

• 不需要手动添加display: none隐藏遮罩，动画执行完成后Angular会自动将遮罩元素从DOM中移除，forwards填充模式会保证动画结束前遮罩保持透明度为0的状态，不会出现闪烁。
• 动画时长、缓动函数可以根据项目实际交互需求调整，保持和侧边栏本身动画时长一致即可获得最顺滑的效果。

内容的提问来源于stack exchange，提问作者Mukil Deepthi