Angular2 canlandırma öğesi nesnesine animasyon bağlama

Question

Angular2 animasyon sistemini, sözde öğe :before için kullanmaya çalışıyorum. aşağıdaki gibi

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

ve daha sonra bir DOM öğesine ekleyin:

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

Ancak bu eklemek istediğiniz, animasyon akışı başına gelince, animasyon durumunu tanımlamak gerekir bir sözde before öğesi. Bunu nasıl yapabilirim?

Answer 1

Bunu deneyin, lütfen bu ne istersen. Bu sizin için çalışır

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

animation.html dosyası

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

Umut. Bu Using Javascript in CSS