How to create theme based CSS animations in Angular Material

Question

I'm using angular material and have 3 different themes. I'm attempting to make a "pulse" animation and I'm using colors of the theme's primary to pulse the

Now from what I read it appears that angular doesn't scope keyframes to components and instead they are declared globally. So it appears that wherever my last declared theme is, it's overriding the previous and in the end the color of the kyframes is the same for all themes.

I created custom component and I added the keyframes and animation as shown below. However, the color doesn't change when I change each theme.

What is the proper way to do this and still use the theme's primary color?

@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)
    }
  }
}

G. Tranter · Accepted Answer · 2019-08-09 21:03:23Z

2

Add to your themes a name to be used for the keyframes, and use that instead of the common 'pulse'. For example:

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

answered Aug 9, 2019 at 21:03

G. Tranter

18k3 gold badges52 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create theme based CSS animations in Angular Material

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related