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

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

0 голосов
/ 10 мая 2019

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

Если страница содержит ошибку, я хочу, чтобы сообщение имело красный фон.Если не по ошибке, я хочу, чтобы у сообщения был зеленый фон.Эти цвета фона соответствуют глобальным стилям 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?

Спасибо

...