Я пытаюсь реализовать анимированную избранную кнопку в приложении 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);
});
});
}
