анимация перехода angular2 не работает

Я пытаюсь применить угловой переход к элементам, но он не работает. Я также добавил 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 Филипе

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