Question

我正在尝试将角度过渡应用于元素，但它不起作用。我也添加了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

Answer 1

它没有工作因为css属性bacckground-color拼写不正确。纠正，然后再试一次。它应该工作

angular2过渡动画不起作用

1 个答案: