hoạt ảnh chuyển tiếp angular2 không hoạt động

Question

Tôi đang cố gắng áp dụng chuyển tiếp góc cho các phần tử nhưng nó không hoạt động. Tôi cũng đã thêm web-animation-js nhưng vẫn không có hiệu lực. bổ sung việc thực hiện chức năng trên onMouseleave và onmouseover

// package.json

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

// mục danh sách

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

// danh sách thành phần

@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 bởi Caio Philipe

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

Answer 1

Nó không hoạt động coz thuộc tính css bacckground-color không được viết đúng chính tả. sửa lại và thử lại. Nó sẽ hoạt động