Angular animations on a single item of *ngfor list

Ionic Framework ionic-v3
1

I am trying to get an angular animation to trigger when an item in a list is swiped on.
In the 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>

In the 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';
...
}
...
  goToAddSongPage() {
    this.navCtrl.push(AddSongPage, {roomId: this.roomId});
  }

As it is currently, the animation triggers on a swipe, but it applies to the entire list. How can I get it to apply to only the item that was swiped?

Another odd issue: the animation gets triggered every time there is a left swipe, regardless of whether or not a vote was made, but it also occurs when there is a right swipe and a vote was made, but not after a right swipe where a vote wasn’t made. I’m hoping to make a different animation occur after a right swipe (well, the same one but with a different color).