Can I apply a CSS class within an Angular 2 animation state?

Question

I am attempting to utilize Angular 2's animation facilities and I've discovered that I can't seem to be able to set a CSS class associated with a state, and I instead must hard code style values, like so:

@Component({
  animations: [
    trigger('responseState', [
      state('default', style({
        color: '#31708f',
        backgroundColor: '#d9edf7',
        borderColor: '#bce8f1'
      })),
      state('success', style({
        color: '#3c763d',
        backgroundColor: '#dff0d8',
        borderColor: '#d6e9c6'
      })),
      state('error', style({
        color: '#a94442',
        backgroundColor: '#f2dede',
        borderColor: '#ebccd1'
      })),
      transition('default <=> success', animate('500ms ease-in')),
      transition('default <=> error', animate('500ms ease-in')),
      transition('error <=> success', animate('500ms ease-in'))
    ])
  ]
})

What I was hoping to do would be something like:

@Component({
  animations: [
    trigger('responseState', [
      state('default', style({
        class: '.default-state'
      })),
      state('success', style({
        class: '.success-state'
      })),
      state('error', style({
        class: '.error-state'
      }))
    ])
  ]
})

Can anyone let me know if this is possible?

Answer 1

As far as I know, this is not possible. The angular animations API seems to still be pretty limited from my experience playing around with it. The only thing I've been consistently using it for is applying animations/transitions to elements that have unpredictable / varying heights. I still use standard CSS3 animations and transitions for nearly all my angular code.