jchomaz/Vulture
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(update) Ajout d'une animation à la mise à jour des scores

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2026-02-03 20:54:01 +01:00
parent 3f63801df9
commit 07d76a7669
1 changed files with 42 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
VApp/src/views/ScoreDisplay.vue
View File

@@ -10,14 +10,18 @@
</div> </div>
</div> </div>
<div class="score-main"> <div class="score-main">
<div class="team-score main-score">{{ scores.BlueRoundScore }}</div> <Transition name="score-pop" mode="out-in">
<div :key="scores.BlueRoundScore" class="team-score main-score">{{ scores.BlueRoundScore }}</div>
</Transition>
</div> </div>
</div> </div>
</div> </div>
<div class="score-cell cell-red color-red"> <div class="score-cell cell-red color-red">
<div class="score-content"> <div class="score-content">
<div class="score-main"> <div class="score-main">
<div class="team-score main-score">{{ scores.RedRoundScore }}</div> <Transition name="score-pop" mode="out-in">
<div :key="scores.RedRoundScore" class="team-score main-score">{{ scores.RedRoundScore }}</div>
</Transition>
</div> </div>
<div class="score-info info-right"> <div class="score-info info-right">
<div class="team-name">Rouge</div> <div class="team-name">Rouge</div>
@@ -38,14 +42,18 @@
</div> </div>
</div> </div>
<div class="score-main"> <div class="score-main">
<div class="team-score main-score">{{ scores.GreenRoundScore }}</div> <Transition name="score-pop" mode="out-in">
<div :key="scores.GreenRoundScore" class="team-score main-score">{{ scores.GreenRoundScore }}</div>
</Transition>
</div> </div>
</div> </div>
</div> </div>
<div class="score-cell cell-yellow color-yellow"> <div class="score-cell cell-yellow color-yellow">
<div class="score-content"> <div class="score-content">
<div class="score-main"> <div class="score-main">
<div class="team-score main-score">{{ scores.YellowRoundScore }}</div> <Transition name="score-pop" mode="out-in">
<div :key="scores.YellowRoundScore" class="team-score main-score">{{ scores.YellowRoundScore }}</div>
</Transition>
</div> </div>
<div class="score-info info-right"> <div class="score-info info-right">
<div class="team-name">Jaune</div> <div class="team-name">Jaune</div>
@@ -301,4 +309,34 @@
.color-yellow { .color-yellow {
background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a); background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
} }
/* Score Pop Animation */
.score-pop-enter-active {
animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.score-pop-leave-active {
animation: pop-out 0.2s ease-in;
}
@keyframes pop-in {
0% {
transform: scale(0.5);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes pop-out {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
</style> </style>