所有按钮上的离子自定义按钮动画触发器

如何解决所有按钮上的离子自定义按钮动画触发器

我正在尝试在Ionic应用程序中实现动画收藏夹按钮，但出现了一些问题。

该按钮在单击时可以正常工作，但是它还会触发其他所有按钮来播放动画。每次页面加载时，动画还将在所有按钮上播放。我怀疑我的ngClass语句添加活动类是在页面加载帖子时以及在添加收藏夹时从可观察对象更新数据时再次触发的。

<ion-button class="favourite" fill="clear" size="small" (click)="toggleFavourite( post,user.userId )">
   <ion-icon [ngClass]="{'active': post.favourites && post.favourites[user.userId] ? true : false}" class="heart"></ion-icon>
</ion-button>

css：

.heart {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(0.9);
    background: url('/assets/images/heart.png') no-repeat;
    background-position: 0 0;
    cursor: pointer;
    animation: fave-heart 1s steps(28);
}

.heart.active {
    background-position: -2800px 0;
    transition: background 1s steps(28);
}

@keyframes fave-heart {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -2800px 0;
    }
}

我做了一些测试，发现每次更新posts变量时都会触发按钮动画。帖子以可观察到的方式返回，因此每当页面加载以及用户收藏帖子时都会对其进行更新，以便我可以更新按钮。但是，我添加了一个调用getPosts（）函数（如下所示）的按钮，它还会在每次单击时触发动画。

<ion-button (click)="getPosts(limit)">click</ion-button>

getPosts(limit){
    return new Promise((resolve) => {
      this.postsService.getPosts(limit).subscribe(data => {
        this.posts = data.reverse()
        let key = data[data.length - 1].$key;
        if (this.lastId === key){
          this.hasMoreData = false;
        }
        resolve(data);
      });
    });
  }

解决方法

我做了更多研究，发现了更好的方法。这种方式使用了Ionic 5动画，因此我可以定位选择时要单击以播放动画的元素的ID。

&.heart {
   width: 100px;
   height: 100px;
   position: absolute;
   transform: scale(0.9);
   background: url('/assets/images/heart.png') no-repeat;
   background-position: 0 0;
   cursor: pointer;
}
&.heart.active {
   background-position: -2800px 0;
}

<ion-col *ngFor="let post of postList ; let i = index;">
   <ion-button (click)="toggleFavourite( post,user.userId,'#favourite' + i )">
      <ion-icon [id]="'favourite'+i" class="heart" color="pink" [ngClass]="{'active': post.favourites && post.favourites[user.userId] ? true : false}"></ion-icon>
   </ion-button>
</ion-col>

import { AnimationController } from '@ionic/angular';

constructor(private animationCtrl: AnimationController){ }

animateForward(elementId){
    const animation = this.animationCtrl
      .create()
      .addElement(document.querySelector(elementId))
      .duration(1000)
      .iterations(1)
      .easing( 'steps(28,end)')
      .keyframes([
        { offset: 0,backgroundPosition: '0 0' },{ offset: 1,backgroundPosition: '-2800px 0' }
      ])

    animation.play()
  }

  animateBack(elementId){
    const animation = this.animationCtrl
      .create()
      .addElement(document.querySelector(elementId))
      .duration(300)
      .iterations(1)
      .easing( 'steps(28,transform: 'scale(0.9)' },{ offset: 0.7,transform: 'scale(1)' },transform: 'scale(0.9)' }
      ])

    animation.play()
  }