angular2过渡动画不起作用

歌手

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

// package.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';
      }

    }

// Caio Philipe的plunkr

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

堆叠编码器

它不能正常工作，因为css属性bacckground-color的拼写不正确。更正该问题，然后重试。它应该工作

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。