angular2トランジションアニメーションが機能していません

Question

要素に角度の変化を適用しようとしていますが、機能しません。 web-animation-jsも追加しましたが、効果はありません。 onMouseleaveとONMOUSEOVER機能の実装を追加

// package.json

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

//リスト項目

<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"> 

//リスト成分

@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によってCaio Philipe

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

Answer 1

CSSプロパティbacckground-colorのスペルは正しくありません。それを修正して、やり直してください。それは動作するはずです