angular2 过渡动画不起作用

Question

我正在尝试将 Angular 过渡应用于元素，但它不起作用。我也添加了 web-animation-js 但仍然没有效果。添加 onMouseleave 和 onMouseover 函数的实现

//包.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 by Caio Philipe

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

Answer 1

它不起作用，因为 css 属性 backckground-color 拼写不正确。更正并重试。它应该工作