Angular2は擬似要素にアニメーションをバインドします

Question

擬似要素:beforeに対して、Angular2アニメーションシステムを使用しようとしています。アニメーションフローごととして、私はアニメーションの状態を定義する必要があります。その後、

animations: [ 
trigger('heroState', [ 
    state('inactive', style({ 
    backgroundColor: '#eee', 
    transform: 'scale(1)' 
    })), 
    state('active', style({ 
    backgroundColor: '#cfd8dc', 
    transform: 'scale(1.1)' 
    })), 
    transition('inactive => active', animate('100ms ease-in')), 
    transition('active => inactive', animate('100ms ease-out')) 
])] 

と、次のように、DOM要素にアタッチ：

<ul> 
<li *ngFor="let hero of heroes" 
    [@heroState]="hero.state" 
    (click)="hero.toggleState()"> 
    {{hero.name}} 
</li> 

しかし、私はこれを添付する擬似before要素。どうやってやるの？

Answer 1

これを試してみてください。これはあなたのために働く

<style> 
h1::before { 
    content: url(animation.html); 
} 
</style> 

animation.htmlファイル

<ul> 
<li *ngFor="let hero of heroes" 
    [@heroState]="hero.state" 
    (click)="hero.toggleState()"> 
    {{hero.name}} 
</li> 

希望。このUsing Javascript in CSS