angular2 geçiş animasyonu çalışmıyor

Question

Öğelere açısal geçişi uygulamaya çalışıyorum ancak çalışmıyor. Web-animasyon-j'leri de ekledim, ancak yine de bir etkisi yok. OnMouseLeave ve OnMouseOver fonksiyonları üzerine uygulanmasını eklendi

// package.json

"web-animations-js": "^2.3.1", 

// liste öğesi

<li class="list-group-item" (mouseover)="onMouseover()" (mouseleave)="onMouseleave()" [@usrSt]="st" [routerLink]= "['/users', i+1, person.name]" *ngFor="let person of (personsList | filter:coursestat:'chosenCourse'); let i = index"> 

// liste bileşeni

@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'], 
    animations: [ 
    trigger('usrSt', [ 
     state('active', style({ 'background-color': '#cfd8dc' })), 
     state('inactive', style({ 'bacckground-color': '#fff' })), 
     transition('active => inactive', animate('1400ms ease-in')), 
     transition('inactive => active', animate('400ms ease-out')) 
    ]) 
    ] 
}) 

     export class ListComponent implements OnInit, OnDestroy { 

     public personsList; 
     @Input() id; 
     st; 
     @Input() coursestat: string; 

     constructor(private getDt: InputDataService) { 

     } 

     ngOnInit() { 
     this.personsList = this.getDt.personArr; 
     console.log(this.personsList); 
     this.st = Array.from(this.personsList, _ => 'active'); 
     console.log(this.id); 
     } 

     ngOnDestroy() { 
     console.log('destroy list'); 
     } 

     onMouseover() { 
     this.st = 'active'; 
     } 
     onMouseleave() { 
     this.st = 'inactive'; 
     } 

    } 

// plunkr tarafından Caio Philipe

https://plnkr.co/edit/CrusaB3iCnhDPIVu2oa5?p=preview

Answer 1

CSS özelliği çalışmıyor coz özelliği bacckground-color doğru yazılmamıştır. bunu düzelt ve tekrar dene.