Angular 2アニメーション状態でCSSクラスを適用できますか？

Question

私はAngular 2のアニメーション施設を利用しようとしていますが、私は状態に関連付けられたCSSクラスを設定できないようだが、代わりにハードスタイルのコード値を設定する必要があることを発見しました：

誰もがこれが可能であるなら、私に知らせることができ

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

：私が何を期待していた何

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

のようなものでしょうか？

Answer 1

私が知る限り、これは不可能です。角アニメーションAPIは、私の経験からそれほど制限されていないようです。私が一貫して使用してきたのは、予測不能な/さまざまな高さの要素にアニメーション/トランジションを適用することだけです。ほとんどすべての角度コードに対して、標準のCSS3アニメーションとトランジションを使用しています。