Angular 4循环内单个元素动画实现问题

嘿，我懂你现在的困扰——你给循环里所有元素绑定了同一个state变量，所以点击按钮时所有元素都会跟着执行动画。要让只有被点击的那个元素触发动画，咱们得给每个元素单独维护自己的动画状态，具体步骤如下：

1. 把全局状态改成状态数组 #

在组件类里，把原来单个的state变量替换成一个数组，用来存储每个元素的独立状态：

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-media',
  templateUrl: './media.component.html',
  animations: [
    trigger('rotatedState', [
      state('initial', style({ transform: 'rotate(0deg)' })),
      state('rotated', style({ transform: 'rotate(180deg)' })),
      transition('initial <=> rotated', animate('300ms ease-in-out'))
    ])
  ]
})
export class MediaComponent implements OnInit {
  mediaContent: any[] = []; // 你的媒体数据集合
  rotationStates: string[] = []; // 存储每个元素的独立动画状态

  ngOnInit() {
    // 初始化状态：给每个媒体项设置默认的初始状态
    this.rotationStates = this.mediaContent.map(() => 'initial');
  }

  // ...其他业务代码
}

2. 修改模板绑定，关联对应索引的状态 #

在*ngFor循环里，把动画绑定从全局的state改成对应索引的rotationStates[i]，让每个元素只监听自己的状态：

<div *ngFor="let media of mediaContent ; let i = index">
  <div class="photo-wrapper">
    <img src="{{media.thumbnail}}" [@rotatedState]='rotationStates[i]'>
  </div>
  <button (click)="rotate($event, i)">旋转</button>
</div>

3. 更新点击方法，仅修改目标元素的状态 #

修改rotate方法，只更新被点击元素对应索引的状态值，避免全局状态变更影响所有元素：

rotate(event: Event, index: number) {
  // 切换当前元素的动画状态：在初始和旋转状态间来回切换
  this.rotationStates[index] = this.rotationStates[index] === 'initial' ? 'rotated' : 'initial';
  // 通过数组拷贝强制触发Angular变更检测，确保视图及时更新
  this.rotationStates = [...this.rotationStates];
}

为什么这样能解决问题？ #

原来的单个state变量是全局共享的，所有循环元素都绑定它，所以只要这个变量变化，所有元素都会触发动画。现在用数组存储每个元素的独立状态，点击按钮时只修改对应索引的状态值，自然只有目标元素会执行动画啦。

内容的提问来源于stack exchange，提问作者user84