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
