Angular2 liên kết hoạt ảnh với phần tử giả

Question

Tôi đang cố gắng sử dụng hệ thống hoạt ảnh Angular2, cho phần tử giả :before. Theo dòng phim hoạt hình, tôi cần phải xác định trạng thái hoạt hình:

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

và sau đó gắn nó vào một phần tử DOM, như sau:

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

Tuy nhiên, tôi muốn đính kèm này để một phần tử giả before. Làm thế nào tôi có thể làm điều đó?

Answer 1

Hãy thử điều này, xin vui lòng điều này sẽ là những gì bạn muốn.

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

tập tin animation.html

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

Hope làm việc này cho bạn.

thêm về điều này Using Javascript in CSS