Spekulaas/PortfolioApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added value pop animation

Browse Source
This commit is contained in:
Ryan Bakkes 2022-01-07 15:06:31 +01:00
parent 0adca2722b
commit 1df3eb3d5e
2 changed files with 49 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
AuthentesApp/src/app/valuesAlign/valuesAlign.page.html
View File

@ -17,7 +17,27 @@
<ion-item *ngFor="let card of this.game.cardset;"> <ion-item *ngFor="let card of this.game.cardset;">
<ion-avatar slot="start"> <ion-avatar slot="start">
<img src="./avatar-finn.png" /> <div class="card-value">
<!-- add and remove class in ts for the svg images -->
<div #heart >
<svg class="draw-value" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg:path
d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"
fill="var(--ion-color-primary)" />
</svg>
</div>
<div #cross >
<svg class="draw-value" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg:path
d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
fill="#CDD6DD" />
</svg>
</div>
</div>
</ion-avatar> </ion-avatar>
<ion-label> <ion-label>
<h2>{{ card.title }}</h2> <h2>{{ card.title }}</h2>
@ -25,16 +45,16 @@
<div class="values-buttons"> <div class="values-buttons">
<button (click)="userClickedButton($event, false)"> <button (click)="userClickedButton($event, card.id, false)">
<svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <svg width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg:path <svg:path
d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z" d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
fill="#CDD6DD" /> fill="#CDD6DD" />
</svg> </svg>
</button> </button>
<button (click)="userClickedButton($event, true)"> <button (click)='userClickedButton($event, card, true)'>
<svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <svg width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<svg:path <svg:path
d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z" d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"
fill="var(--ion-color-primary)" /> fill="var(--ion-color-primary)" />

24
AuthentesApp/src/app/valuesAlign/valuesAlign.page.scss
View File

@ -7,6 +7,30 @@
transform: translateY(-50%); transform: translateY(-50%);
} }
.card-value {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid black;
display: inline-block;
padding: 6px 5px;
}
.draw-value {
width: 28px;
animation: a 1s ease-in-out;
}
@keyframes a {
50% {
width: 40px;
margin: -5px;
}
}
.values-buttons button:active {
background: rgb(199, 199, 199);
}
.values-buttons button { .values-buttons button {
border-radius: 50%; border-radius: 50%;
// line-height: 50px; // line-height: 50px;