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})
      ]))
    ])
  ])
];

See this page, try to add and remove items, might be you need the same thing

离子滑动时，* ngFor列表中单个项目的角度动画？

1 个答案: