Angular material 如何在角度材质中创建基于主题的CSS动画

我用的是有角度的材料，有3个不同的主题。我试图制作一个“脉冲”动画，我用主题的主色调来脉冲

现在从我读到的内容来看，angular并没有将关键帧范围限定到组件，而是全局声明它们。因此，无论我上一次声明的主题在哪里，它都会覆盖上一个主题，最终所有主题的kyframes颜色都是相同的

我创建了自定义组件，并添加了关键帧和动画，如下所示。但是，当我改变每个主题时，颜色不会改变

什么是正确的方法来做到这一点，仍然使用主题的原色

@import '~@angular/material/theming';

@mixin atrh-rating-component-theme($theme) {
  $primary: map-get($theme, primary);

  .bar {
    background-color: mat-color($primary, 200);

    &--selected {
      background-color: mat-color($primary);
    }

    &--highlighted {
      background-color: mat-color($primary, 800);
      animation: pulse 1.3s;
      animation-iteration-count: 4;
    }
  }

  @keyframes pulse {
    0% {
        background-color: mat-color($primary, 900)
    }

    50% {
        background-color: mat-color($primary, 700)
    }

    100% {
        background-color: mat-color($primary, 900)
    }
  }
}

---

为主题添加一个用于关键帧的名称，并使用该名称而不是常用的“脉冲”。例如：

$theme: map-merge(mat-light-theme(...), ('keyframes': 'pulse1'));

@mixin atrh-rating-component-theme($theme) {

  $keyframes-name: map-get($theme, keyframes);

  .bar {
    ...

    &--highlighted {
      ...
      animation: $keyframes-name 1.3s;
      ...
    }
  }

  @keyframes #{$keyframes-name} {
    ...
  }
}