如何在 Angular Material 中创建基于主题的 CSS 动画

Question

我正在使用 angular material 并且有 3 个不同的主题。我正在尝试制作一个 "pulse" 动画，我正在使用主题的主要颜色来使

脉动

根据我的阅读，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)
    }
  }
}

Answer 1

为您的主题添加一个用于关键帧的名称，并使用该名称代替常见的 'pulse'。例如：

$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} {
    ...
  }
}

如何在 Angular Material 中创建基于主题的 CSS 动画

How to create theme based CSS animations in Angular Material

css-animations

angular-material

angular-material2