时间戳

首页 > 解决方案 > 离子自定义按钮动画在所有按钮上触发

css - 离子自定义按钮动画在所有按钮上触发

问题描述

我正在尝试在 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;
    }
}

我做了更多的测试，发现每次更新我的帖子变量时都会触发按钮动画。这些帖子作为可观察对象返回，因此它会在页面加载时以及用户收藏帖子时更新，以便我可以更新按钮。但是，我添加了一个调用 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);
      });
    });
  }

标签： cssangularionic-frameworkcss-animations

解决方案

我做了更多的研究，并找到了一种更好的方法。这种方式使用 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, end)')
      .keyframes([
        { offset: 0, transform: 'scale(0.9)' },
        { offset: 0.7, transform: 'scale(1)' },
        { offset: 1, transform: 'scale(0.9)' }
      ])

    animation.play()
  }

推荐阅读