将脉冲/呼吸效果应用于primeng的卡片边框

Question

我有一张primeng的卡片类中显示的员工名单。

   <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}">

如果我将其添加到我的 scss 中

.alert-card {
  border: 2px solid rgba(231, 8, 100, 0.55) !important;
}

我正确地看到了边框（仅当我在末尾添加

!important

时）

我现在想要的是在该边界上有一个脉冲效果，使它慢慢变成红色，红色循环消失，所以我尝试了这个

.alert-card {
  animation: fadeColor 1s infinite;
}

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

或者我也尝试过这个

.alert-card {
  border-width: 3px;
  border-style: solid;
  border-color: transparent;
  animation: fadeColor 1s infinite;
}

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

也没有效果。在这种情况下，我可以看到至少一个 3px 的大边框，它是灰色的（默认颜色），但没有应用任何效果。

但不幸的是它没有效果。预先感谢您的贡献。

Answer 1

您可以删除 !important 并直接应用样式。

这个来自 w3 的 示例 有助于让 CSS 恰到好处。

我们可以指定默认的边框颜色（确保不设置为 important），那么动画只需要设置

50%

就会跳动。

.alert-card {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: transparent;
  animation: fadeColor 1s infinite;
  border-radius: 6px;
}

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

Stackblitz 演示