Ionic中如何为*ngFor列表的单个项实现滑动触发Angular动画？

你遇到的核心问题是所有列表项共享了同一个全局动画状态变量，所以只要状态发生变化，所有绑定这个变量的item都会同步触发动画。要实现仅被滑动的项触发动画，我们需要给每个列表项单独维护自己的动画状态，而不是用全局变量。

下面是具体的实现步骤和代码修改方案：

1. 为每个列表项单独维护动画状态 #

在你的组件类中，不要使用全局的upvoteState，而是创建一个对象来存储每首歌曲对应的动画状态。建议用歌曲的唯一标识（比如id）作为键，动画状态作为值：

// 组件类中定义状态存储对象
itemAnimStates: { [key: string]: string } = {};

// 初始化时给每个歌曲设置默认动画状态
ngOnInit() {
  this.songList.subscribe(songs => {
    songs.forEach(song => {
      this.itemAnimStates[song.id] = 'initial';
    });
  });
}

2. 修改模板绑定，指向当前项的专属状态 #

把原来绑定全局状态的代码，改成绑定当前歌曲对应的状态：

<ion-list *ngFor="let song of songList | async">
  <ion-item 
    (swipeleft)="vote(song, true); toggleUpvoteAnim(song.id)" 
    (swiperight)="vote(song, false)" 
    class="bottom-border" 
    [@myupvote]="itemAnimStates[song.id]"
  >
    {{song.title}}
    <!-- 你的其他内容 -->
  </ion-item>
</ion-list>

3. 更新动画触发方法，仅修改当前项的状态 #

修改toggleUpvoteAnim方法，让它接收当前歌曲的id，只更新对应项的动画状态：

toggleUpvoteAnim(songId: string) {
  // 切换当前项的动画状态，比如从初始态到激活态
  this.itemAnimStates[songId] = this.itemAnimStates[songId] === 'active' ? 'initial' : 'active';
  
  // 如果需要动画结束后自动重置状态，可添加定时器（时长和你的动画时长一致）
  setTimeout(() => {
    this.itemAnimStates[songId] = 'initial';
  }, 500);
}

补充：确认动画定义的正确性 #

确保你的动画是针对单个item的独立动画，比如：

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

@Component({
  // 其他组件元数据
  animations: [
    trigger('myupvote', [
      state('initial', style({ transform: 'translateY(0)', opacity: 1 })),
      state('active', style({ transform: 'translateY(-10px)', opacity: 0.7 })),
      transition('initial <=> active', animate('300ms ease-in-out'))
    ])
  ]
})

这样修改后，每次滑动某个item时，只会修改该item对应的动画状态，只有这个被滑动的项会触发动画，其他列表项不会受到影响。

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