Как присвоить имя класса состоянию анимации в угловых 2/4?

Question

Я использую угловую анимацию с версией 4.1.3

Вот код ниже:

@Component({
  selector : 'my-fader',
  animations: [
    trigger('visibilityChanged', [
      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
    ])
  ]
...

Теперь вместо стиля в состоянии я хотел бы дать имя существующего класса, т.е. используя класс, определенный в таблицах стилей (т.е. не встроенные стили).

Это возможно? Если так, пожалуйста, помогите.

Answer 1

Ты не можешь Я также искал подобное решение.

Angular Animations использует API веб-анимации, а не CSS.

См. https://css-tricks.com/css-animations-vs-web-animations-api/ для дальнейшего чтения.

Answer 2

Вы не можете дать ему классы CSS, но вы можете сделать что-то вроде этого

trueObject = { opacity: 1, transform: 'scale(1.0)' };
falseObject = { opacity: 0, transform: 'scale(0.0)'  };
@Component({
  selector : 'my-fader',
  animations: [
    trigger('visibilityChanged', [
      state('true' , style(trueObject)),
      state('false', style(falseObject)),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
    ])
  ]