在ngFor列表中的單個項目上進行角動畫在離子上滑動？

Question

我正在嘗試在列表中的某個項目上滑動時觸發動畫。 當前，動畫會在滑動后觸發並起作用，但是它適用於整個列表。 有什么辦法讓它僅能觸發被刷過的物品嗎？

在HTML中：

<ion-list *ngFor="let song of songList | async">
  <ion-item (swipeleft)="vote(song, true); toggleUpvoteAnim()" (swiperight)="vote(song, false)" class="bottom-border" [@myupvote]="upvoteState">
    {{song.title}}
    <div item-right>{{song.upVotes}}</div>
    <div item-right>UP</div>
    <div item-right>|</div>
    <div item-right>DOWN</div>
    <div item-right>{{song.downVotes}}</div>
  </ion-item>
</ion-list>

在TS中：

@IonicPage()
@Component({
  selector: 'page-guest-song-list',
  templateUrl: 'guest-song-list.html',
  animations: [
    trigger('myupvote', [
      state('noupvote', style({
        backgroundColor: '#191414'
      })),
      state('upvote', style({
        backgroundColor: '#191414'
      })),
      transition('* => *',
        animate('.25s', keyframes([
        style({backgroundColor: '#191414', offset: 0}),
        style({backgroundColor: '#1db954', offset: 0.25}),
        style({backgroundColor: '#191414', offset: 1})
        ]))
      )
    ])
  ]
})
export class GuestSongListPage {

  upvoteState = 'noupvote';
...
}
...
  toggleUpvoteAnim() {
    this.upvoteState = (this.upvoteState == 'upvote') ? 'noupvote ' : 'upvote';
  }

Answer 1

從左向右飛行項目，刪除后從右向左飛行

export const flyItems = [
  trigger('flyItems', [
    state('in', style({transform: 'translateX(0)'})),
    transition('void => *', [
      animate(700, keyframes([
        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
      ]))
    ]),
    transition('* => void', [
      animate(500, keyframes([
        style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
        style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
      ]))
    ])
  ])
]; 

看到此頁面，嘗試添加和刪除項目，可能是您需要相同的東西