Angular 带有 *ngFor 的动画仅适用于点击值而不适用于所有元素

Question

我想在单击一个用 *ngFor 生成的特定 div 时应用动画。目前它适用于每 div 次点击。我怎样才能做到这一点？

   animations: [
trigger('changeDivSize', [
  state('initial', style({
    width: '30px',
    height: '30px',
    opacity: '0.5',
    margin: '10px'
  })),
  state('final', style({
    width: '32px',
    height: '32px',
    opacity: '1',
    margin: '10px'
  })),
  transition('initial<=>final', animate('200ms')),
  transition('final=>initial', animate('200ms'))
]),

]

  changeState() {
    this.currentState = this.currentState  === 'initial' ? 'final' : 'initial';
  }

    <div class="row">
      <div *ngFor="let group of groups" class="col-1">
      <div  (click)="changeState()" [@changeDivSize]=currentState  [ngStyle]="{'background-color': group.colorCode}"></div>
    </div>

Answer 1

您可以将元素的索引与 *ngFor 一起使用，以便为每个元素提供单独的 currentState 值，这样动画就可以在各个元素上运行。

  <div *ngFor="let group of groups;let i = index" class="col-1">
    <div  (click)="changeState(i)" 
          [@changeDivSize]=group.currentState  
          [ngStyle]="{'background-color': group.colorCode}">
    </div>
  </div>

  public changeState(index: number): void {
      console.log(index)
      this.groups[index].currentState = 
          (this.groups[index].currentState  === 'initial') ? 'final' : 'initial';
  }

Answer 2

 changeState(index) {
    this.currentState[index] = this.currentState[index]  === 'initial' ? 'final' : 'initial';
  }

最好取 array of currentState of each item of group as above.

然后对组的单个元素使用 currentState[i]。

<div class="row">
   <div *ngFor="let group of groups, index as i" class="col-1">
   <div  (click)="changeState(i)" [@changeDivSize]=currentState[i]  [ngStyle]="{'background-color': group.colorCode}"></div>
</div>

希望对您有所帮助。

Angular 带有 *ngFor 的动画仅适用于点击值而不适用于所有元素

Angular Animations with *ngFor apply only to clicked values not to all elements

typescript

angular

angular-animations