angular2 transition animation is not working

Question

I am trying to apply the angular transition to the elements but it's not working. I have added web-animation-js as well but still no effect. added the implementation on onMouseleave and onMouseover functions

// package.json

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

//list item

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

// list component

@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

It's not working coz the css property bacckground-color is not spelled correctly. correct that and try again. It should work