Объяснение -:
- есть 4 строки, в каждой строке есть свой идентификатор,
- предположим, что пользователь выбирает строку, переменная встряхивания в файле ts содержит идентификатор этой строки
- Пользователь может выбрать только одну за раз
- , когда пользователь пытается выбрать другую строку, эта строка дрожит
Проблема заключается в том, что: - после выбора одной строки -:- пользователь пытается выбрать другую строку, которую он встряхивает - но когда пользователь нажимает на эту строку во второй раз снова, он не трясется
Html
<ion-row align-items-center [class.shake]="shake==playerValue.playerUid ? 'shake' : null">
<ion-col col-3>
<!-- <div class="create-team-imge" >
<img src={{playerValue.playerPhoto}}>
</div> -->
<div class="create-team-imge">
<ion-avatar item-star no-line>
<button (click)="playerinfo(i)"><img src={{playerValue.playerPhoto}}></button>
</ion-avatar>
<ion-badge>
<ion-icon name="information"></ion-icon>
</ion-badge>
</div>
</ion-col>
<ion-col col-md-9 col-9 (click)="setClickedRow(i)">
<ion-row align-items-center>
<ion-col col-md-8 col-7>
<p>{{playerValue.playerName}}</p>
<p>Selected By {{playerValue.selectedBy}}</p>
<p class="country" >{{playerValue.teamName}}</p>
<p class="points"> Points:
<span>{{playerValue.totalPoint}}</span>
</p>
</ion-col>
<ion-col col-md-4 col-5 class="cradit">
<p>
<span>{{playerValue.playerCreditPoint}}</span>
</p>
<button ion-button icon-only>
<ion-icon [name]="playerValue.isSelected? 'close' : 'ios-checkmark'"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
css
@keyframes shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-56px) rotateY(-5deg)}
37.5% {transform: translateX(55px) rotateY(4deg)}
62.5% {transform: translateX(-33px) rotateY(-2deg)}
87.5% {transform: translateX(22px) rotateY(1deg)}
100% {transform: translateX(0)}
}
@-webkit-keyframes shake {
0% {-webkit-transform: translateX(0);}
12.5% {-webkit-transform: translateX(-56px) rotateY(-5deg)}
37.5% {-webkit-transform: translateX(55px) rotateY(4deg)}
62.5% {-webkit-transform: translateX(-33px) rotateY(-2deg)}
87.5% {-webkit-transform: translateX(22px) rotateY(1deg)}
100% {-webkit-transform: translateX(0)}
}
.shake {
-webkit-animation: shake 600ms ease-in-out;
animation: shake 600ms ease-in-out;
}
ts -:
export class CreateteamPage {
shake: any = 0;
playerSelection(playerType, index) {
console.log('total player ' + this.totalPlayer);
console.log('index ' + this.segmentButtonName[this.segmentindex].maxSelection);
if (this.totalCreaditPoint < parseFloat(this.players[index].playerCreditPoint)) {
if (this.totalPlayer >= 11) {
this.shake = this.players[index].playerUid;
const toast = this.toastCtrl.create({
message: 'u can select only 11 players',
duration: 3000,
position: 'top',
});
toast.present();
} else {
this.shake = this.players[index].playerUid;
const toast = this.toastCtrl.create({
message: 'u dont have enough credit point',
duration: 3000,
position: 'top',
});
toast.present();
}
} else {
if (this.players[index].playerType == playerType) {
if (
this.segmentButtonName[this.segmentindex].countSelection >=
this.segmentButtonName[this.segmentindex].maxSelection
) {
this.shake = this.players[index].playerUid;
const toast = this.toastCtrl.create({
message:
'Select maximun ' +
this.segmentButtonName[this.segmentindex].maxSelection +
' ' +
this.players[index].playerType,
duration: 3000,
position: 'top',
});
toast.present();
} else {
if (this.totalPlayer >= 11) {
this.shake = this.players[index].playerUid;
const toast = this.toastCtrl.create({
message: 'u can select only 11 players',
duration: 3000,
position: 'top',
});
toast.present();
} else {
if (this.team1player >= 7 && this.players[index].teamName == this.matchData.data.team1Name) {
this.shake = this.players[index].playerUid;
const toast = this.toastCtrl.create({
message: 'u can select only 7 player from ' + this.matchData.data.team1Name,
duration: 3000,
position: 'top',
});
toast.present();
} else if (this.team2player >= 7 && this.players[index].teamName == this.matchData.data.team2Name) {
this.shake = this.players[index].playerUid;
const toast = this.toastCtrl.create({
message: 'u can select only 7 player from ' + this.matchData.data.team2Name,
duration: 3000,
position: 'top',
});
toast.present();
} else {
this.players[index].isSelected = true;
this.segmentButtonName[this.segmentindex].countSelection =
this.segmentButtonName[this.segmentindex].countSelection + 1;
this.totalCreaditPoint -= parseFloat(this.players[index].playerCreditPoint);
if (this.selectedPlayers.indexOf(this.players[index]) == -1) {
console.log(this.players[index].teamName);
console.log(this.matchData.data.team1Name);
console.log(this.matchData.data.team1Name);
if (this.players[index].teamName == this.matchData.data.team1Name) {
this.team1player++;
} else if (this.players[index].teamName == this.matchData.data.team2Name) {
this.team2player++;
}
this.selectedPlayers.push(this.players[index].playerUid);
this.storage.set('team', this.selectedPlayers);
this.storage.get('team').then(val => {
console.log(val);
});
this.totalPlayer++;
}
console.log('team1player:' + this.team1player);
console.log('team2player:' + this.team2player);
}
}
}
}
}
}
}