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

Question

I am using angular animations with version 4.1.3

Here is the code below:

@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 the style state, I would like to provide an existing class name ie, using the class defined in the stylesheets (i.e. not inline styles)

Is it possible? If yes, please help.

Answer 1

You can't. I also looked for a similar solution.

Angular Animations uses the web animation API, not CSS.

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

Answer 2

, :

import { trigger, animate, transition, style } from '@angular/animations';

export const myAnimation =
  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'))
  ]);

, :

import { fadeAnimation } from 'LOCALIZATION_OF_IT';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [fadeAnimation]
})

Answer 3

You cannot give it CSS classes, but you can do something like this

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