Angular2 transition animation not working

Question

I am trying to apply an angular transition to elements, but it does not work. I also added web animation-js, but still no effect. added implementation of 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 of components

 @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

This does not work because the css bacckground-color property is spelled incorrectly. correct it and try again. He should work