Saya menggunakan bahan sudut dan memiliki 3 tema berbeda. Saya mencoba membuat animasi "denyut nadi" dan saya menggunakan warna utama tema untuk menggerakkannya

Sekarang dari apa yang saya baca, tampaknya angular tidak mencakup keyframe ke komponen dan sebaliknya mereka dideklarasikan secara global. Jadi tampaknya di mana pun tema saya yang terakhir dideklarasikan, itu mengesampingkan yang sebelumnya dan pada akhirnya warna kyframe sama untuk semua tema.

Saya membuat komponen khusus dan saya menambahkan bingkai utama dan animasi seperti yang ditunjukkan di bawah ini. Namun, warnanya tidak berubah ketika saya mengubah setiap tema.

Apa cara yang tepat untuk melakukan ini dan masih menggunakan warna utama tema?

@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)
    }
  }
}
0
Canolyb1 8 Agustus 2019, 22:40

1 menjawab

Jawaban Terbaik

Tambahkan ke tema Anda nama yang akan digunakan untuk bingkai utama, dan gunakan itu sebagai ganti 'pulsa' umum. Sebagai contoh:

$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} {
    ...
  }
}
1
G. Tranter 9 Agustus 2019, 21:03