Question

以下代码在点击任何项目时将动画应用于所有项目。我想将动画仅应用于用户点击的项目。我如何实现这一目标？

@Component({
  template: `<div *ngFor="let item of items">
                <div class="item"
                  style="height: 200; width: 400; padding: 20px;"
                  (click)="viewItem(item)"
                  [@zoomItem]="zoomItem">
                       {{ item.name }}
                </div>
             </div>`,
  animations: [
    trigger('zoomItem', [
      state('no', style({transform: 'scale(1)'}),
      state('yes', style({transform: 'scale(1.5)'}),
      transition('no <=> yes', animate('400ms'))
    ])
  ]

})

export class ItemClass {
  zoomItem = 'no';

  viewItem(item) {
    this.zoomItem = 'yes';
    // 
  }
}

Answer 1

将具有类div的{{1}}个因子放入他们自己的组件中并在那里应用动画并使item成为父组件

ItemClass

@Component({ selector: 'item', template: ` <div class="item" style="height: 200; width: 400; padding: 20px;" (click)="viewItem()" [@zoomItem]="zoomItem"> {{ item.name }} </div> `, animations: [ trigger('zoomItem', [ state('no', style({transform: 'scale(1)'}), state('yes', style({transform: 'scale(1.5)'}), transition('no <=> yes', animate('400ms')) ]) ] }) export class Item { zoomItem = 'no'; @Input() item: any; viewItem() { this.zoomItem = 'yes'; } }父组件

ItemClass

当用户选择它时，如何通过* ngFor迭代的项目列表中的项目动画？

1 个答案: