我可以在Angular 2动画状态下应用CSS类吗？

Question

我试图利用Angular 2的动画功能，但发现我似乎无法设置与状态关联的CSS类，而我必须硬编码样式值，如下所示：

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

我希望做的是：

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

谁能告诉我这是否可行吗？

Answer 1

据我所知，这是不可能的。从我的使用经验来看，角度动画 API 似乎仍然相当有限。我一直使用它的唯一目的是将动画/过渡应用于具有不可预测/变化高度的元素。我仍然对几乎所有的 Angular 代码使用标准 CSS3 动画和过渡。