How to give class name to animation state in angular 2/4?

Question

I am using angular Animations with version 4.1.3

Here is the below code:

@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'))
    ])
  ]
...

Now, instead of style in state I would like to give existing class name i.e using the class defined in style sheets (i.e Not inline styles)

Is that possible? If so please help.

Answer 1

You can't. I was also looking for a similar solution.

Angular Animations use the Web Animations API and not CSS.

See https://css-tricks.com/css-animations-vs-web-animations-api/ for further reading.