PrimeNG卡片组件边框脉冲呼吸效果实现求助

嘿，我来帮你搞定这个边框脉冲动画的问题～

首先得说你遇到的核心问题：CSS动画里的!important是不生效的，这是CSS规范里的规定，动画关键帧里的!important会被浏览器直接忽略，所以你之前写的关键帧加!important根本起不到作用。而且你一开始必须用!important才能覆盖PrimeNG卡片的默认边框，说明默认样式的选择器权重比你的.alert-card高，那咱们换个思路，不用!important，而是用更具体的选择器来提高权重。

解决方案步骤： #

• 提高选择器权重，摆脱!important
  PrimeNG的卡片组件一般自带p-card类，咱们把选择器写成.p-card.alert-card，这样权重就比单纯的.alert-card高，就能直接覆盖默认的边框样式，完全不需要!important。
• 编写有效的脉冲动画
  现在不用依赖!important了，动画关键帧里的border-color就能正常生效，咱们把动画调整成透明和目标红色的循环即可。

完整的SCSS代码： #

/* 用更具体的选择器覆盖PrimeNG默认样式 */
.p-card.alert-card {
  border-width: 2px;
  border-style: solid;
  /* 初始状态设为透明 */
  border-color: transparent;
  /* 绑定动画，ease-in-out让过渡更自然 */
  animation: fadeColor 1.5s infinite ease-in-out;
}

@keyframes fadeColor {
  0%, 100% {
    border-color: transparent;
  }
  50% {
    border-color: rgba(231, 8, 100, 0.55);
  }
}

模板部分确认 #

你的模板里的[ngClass]绑定是正确的，只要确保employee.hasAlert为true时，alert-card类能正确加到卡片上就行：

<ng-template pTemplate="gridItem">
      <div class="grid grid-nogutter">
        <div *ngFor="let employee of employees" class="col-12 md:col-4">
          <div class="card m-3 surface-border" [ngClass]="{'alert-card': employee.hasAlert}">
            <!-- 卡片内容 -->
          </div>
        </div>
      </div>
</ng-template>

额外小建议 #

• 可以调整动画时长（比如把1.5s改成你觉得舒服的速度），或者修改关键帧的百分比，让动画节奏更符合你的需求；
• 如果还是担心样式被覆盖，可以再给选择器加个父级容器的类，比如.employee-grid .p-card.alert-card，进一步提高权重。

这样改完之后，你的边框应该就能正常呈现脉冲呼吸的效果啦～

备注：内容来源于stack exchange，提问作者Anna Klein