ivanch/mindforge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing animation
All checks were successful
Mindforge Web Build and Deploy (internal) / Build Mindforge Web Image (push) Successful in 2m36s
Details
Mindforge Web Build and Deploy (internal) / Deploy Mindforge Web (internal) (push) Successful in 8s
Details

Browse Source
This commit is contained in:
Jose Henrique
2026-06-14 15:32:15 -03:00
parent 475a7c120d
commit d32d229ee6
3 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
GUIDELINES-ESTILO.md
View File

@@ -434,9 +434,8 @@ Metadados (rótulos, tags, estatísticas): `text-transform: uppercase`, `letter-
}
@keyframes cardExit {
0% { transform: translateX(0) rotateY(180deg) rotateZ(0); opacity: 1; }
45% { transform: translateX(28px) rotateY(180deg) rotateZ(2deg); opacity: .9; }
100% { transform: translateX(-32px) rotateY(180deg) rotateZ(-2deg); opacity: 0; }
0% { transform: rotateY(180deg) translateY(0); opacity: 1; }
100% { transform: rotateY(180deg) translateY(-44px); opacity: 0; }
}
```
@@ -498,13 +497,13 @@ Metadados (rótulos, tags, estatísticas): `text-transform: uppercase`, `letter-
.stamp.correct { color: var(--green-deep); }
.stamp.wrong { color: var(--red-deep); }
.stamp.show { animation: stampIn .7s var(--ease); }
.stamp.show { animation: stampIn .42s var(--ease); }
@keyframes stampIn {
0% { opacity: 0; transform: rotate(-18deg) scale(1.8); }
38% { opacity: 1; transform: rotate(-10deg) scale(.9); }
58% { transform: rotate(-12deg) scale(1.04); }
100% { opacity: 0; transform: rotate(-12deg) scale(1); }
0% { opacity: 0; transform: rotate(-14deg) scale(0.6); }
55% { opacity: 1; transform: rotate(-7deg) scale(1.08); }
75% { transform: rotate(-8deg) scale(0.95); }
100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
```
@@ -585,8 +584,8 @@ Metadados (rótulos, tags, estatísticas): `text-transform: uppercase`, `letter-
| Animação | Gatilho | Duração |
| --- | --- | --- |
| Virada do flashcard (`rotateY(180deg)`) | Clique/Espaço/Enter | `.78s` |
| Saída do cartão (`cardExit`) | Marcar Correto/Incorreto | `.58s` |
| Carimbo (`stampIn`) | Marcar Correto/Incorreto | `.7s` |
| Saída do cartão (`cardExit`) | Marcar Correto/Incorreto | `.52s` |
| Carimbo (`stampIn`) | Marcar Correto/Incorreto | `.42s` |
| Brilho do botão (hover) | Hover | `.55s` |
| Confete (`confettiFly`) | Marcar Correto | `850ms` |
| Revelação dos controles (`.controls.ready`) | Revelação da resposta | `.35s` |

17
Mindforge.Web/src/components/FlashcardStudySession.css
View File

@@ -138,7 +138,7 @@
}
.study-flashcard.is-reviewed {
animation: studyCardExit .58s var(--ease);
animation: studyCardExit .52s var(--ease) forwards;
}
.study-card-face {
@@ -361,7 +361,7 @@
}
.study-stamp.show {
animation: studyStampIn .7s var(--ease);
animation: studyStampIn .42s var(--ease);
}
.study-nav-row {
@@ -509,16 +509,15 @@
}
@keyframes studyCardExit {
0% { transform: translateX(0) rotateY(180deg) rotateZ(0); opacity: 1; }
45% { transform: translateX(28px) rotateY(180deg) rotateZ(2deg); opacity: .9; }
100% { transform: translateX(-32px) rotateY(180deg) rotateZ(-2deg); opacity: 0; }
0% { transform: rotateY(180deg) translateY(0); opacity: 1; }
100% { transform: rotateY(180deg) translateY(-44px); opacity: 0; }
}
@keyframes studyStampIn {
0% { opacity: 0; transform: rotate(-18deg) scale(1.8); }
38% { opacity: 1; transform: rotate(-10deg) scale(.9); }
58% { transform: rotate(-12deg) scale(1.04); }
100% { opacity: 0; transform: rotate(-12deg) scale(1); }
0% { opacity: 0; transform: rotate(-14deg) scale(0.6); }
55% { opacity: 1; transform: rotate(-7deg) scale(1.08); }
75% { transform: rotate(-8deg) scale(0.95); }
100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@media (max-width: 1120px) {

4
Mindforge.Web/src/components/FlashcardStudySession.tsx
View File

@@ -199,12 +199,12 @@ export function FlashcardStudySession({ cards, onAnswer, onEnd }: FlashcardStudy
stampTimerRef.current = window.setTimeout(() => {
setCardExiting(true);
stampTimerRef.current = null;
}, 90);
}, 160);
advanceTimerRef.current = window.setTimeout(() => {
advanceCard();
advanceTimerRef.current = null;
}, 760);
}, 700);
} catch (err: any) {
resetTimeout(stampTimerRef);
resetTimeout(advanceTimerRef);