Как создать анимационные переходы между классами scss/css в Angular?

Question

Я создаю сообщение, которое меняет стили в зависимости от состояния страницы.

Если страница содержит ошибку, я хочу, чтобы сообщение имело красный фон. Если не по ошибке, я хочу, чтобы у сообщения был зеленый фон. Эти цвета фона соответствуют глобальным стилям CSS, поэтому анимация должна извлекать стили из файла стилей компонента.

До сих пор я достигал этого путем жесткого кодирования "backgroundColor: red" и "backgroundColor: green" в каждом из состояний анимации. Однако это решение также переопределяет стили в файле.scss компонента.

Шаблон:

<div [@hasError]="errorCondition" class="myClass" [myClass.error]="errorCondition"></div>

Стили scss:

.myClass {
  background-color: green;

  &.error {
    background-color: red;
  }
}

Составная часть:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ],
  animations: [
    trigger('hasError', [
      state(
        'true',
        style({
          backgroundColor: '*'
        })
      ),
      state(
        'false',
        style({
          backgroundColor: '*'
        }),
      ),
      transition('false<=>true', [animate('0.4s')]),
    ])
  ]
})

Я использую подстановочный оператор (*), потому что я хочу, чтобы каждое переходное состояние получало backgroundColor из стиля элемента, который устанавливается классом "error".

Тем не менее, никакой анимации не происходит вообще... Я думаю, это потому, что стиль элемента изменяется в [myClass.error]="errorCondition" до запуска анимации оператор подстановки возвращает одинаковый стиль для обоих состояний.

Кто-нибудь знает или может объяснить взаимодействие между анимацией и классами CSS элементов?

Спасибо