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 { @keyframes cardExit {
0% { transform: translateX(0) rotateY(180deg) rotateZ(0); opacity: 1; } 0% { transform: rotateY(180deg) translateY(0); opacity: 1; }
45% { transform: translateX(28px) rotateY(180deg) rotateZ(2deg); opacity: .9; } 100% { transform: rotateY(180deg) translateY(-44px); opacity: 0; }
100% { transform: translateX(-32px) rotateY(180deg) rotateZ(-2deg); opacity: 0; }
} }
``` ```
@@ -498,13 +497,13 @@ Metadados (rótulos, tags, estatísticas): `text-transform: uppercase`, `letter-
.stamp.correct { color: var(--green-deep); } .stamp.correct { color: var(--green-deep); }
.stamp.wrong { color: var(--red-deep); } .stamp.wrong { color: var(--red-deep); }
.stamp.show { animation: stampIn .7s var(--ease); } .stamp.show { animation: stampIn .42s var(--ease); }
@keyframes stampIn { @keyframes stampIn {
0% { opacity: 0; transform: rotate(-18deg) scale(1.8); } 0% { opacity: 0; transform: rotate(-14deg) scale(0.6); }
38% { opacity: 1; transform: rotate(-10deg) scale(.9); } 55% { opacity: 1; transform: rotate(-7deg) scale(1.08); }
58% { transform: rotate(-12deg) scale(1.04); } 75% { transform: rotate(-8deg) scale(0.95); }
100% { opacity: 0; transform: rotate(-12deg) scale(1); } 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 | | Animação | Gatilho | Duração |
| --- | --- | --- | | --- | --- | --- |
| Virada do flashcard (`rotateY(180deg)`) | Clique/Espaço/Enter | `.78s` | | Virada do flashcard (`rotateY(180deg)`) | Clique/Espaço/Enter | `.78s` |
| Saída do cartão (`cardExit`) | Marcar Correto/Incorreto | `.58s` | | Saída do cartão (`cardExit`) | Marcar Correto/Incorreto | `.52s` |
| Carimbo (`stampIn`) | Marcar Correto/Incorreto | `.7s` | | Carimbo (`stampIn`) | Marcar Correto/Incorreto | `.42s` |
| Brilho do botão (hover) | Hover | `.55s` | | Brilho do botão (hover) | Hover | `.55s` |
| Confete (`confettiFly`) | Marcar Correto | `850ms` | | Confete (`confettiFly`) | Marcar Correto | `850ms` |
| Revelação dos controles (`.controls.ready`) | Revelação da resposta | `.35s` | | 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 { .study-flashcard.is-reviewed {
animation: studyCardExit .58s var(--ease); animation: studyCardExit .52s var(--ease) forwards;
} }
.study-card-face { .study-card-face {
@@ -361,7 +361,7 @@
} }
.study-stamp.show { .study-stamp.show {
animation: studyStampIn .7s var(--ease); animation: studyStampIn .42s var(--ease);
} }
.study-nav-row { .study-nav-row {
@@ -509,16 +509,15 @@
} }
@keyframes studyCardExit { @keyframes studyCardExit {
0% { transform: translateX(0) rotateY(180deg) rotateZ(0); opacity: 1; } 0% { transform: rotateY(180deg) translateY(0); opacity: 1; }
45% { transform: translateX(28px) rotateY(180deg) rotateZ(2deg); opacity: .9; } 100% { transform: rotateY(180deg) translateY(-44px); opacity: 0; }
100% { transform: translateX(-32px) rotateY(180deg) rotateZ(-2deg); opacity: 0; }
} }
@keyframes studyStampIn { @keyframes studyStampIn {
0% { opacity: 0; transform: rotate(-18deg) scale(1.8); } 0% { opacity: 0; transform: rotate(-14deg) scale(0.6); }
38% { opacity: 1; transform: rotate(-10deg) scale(.9); } 55% { opacity: 1; transform: rotate(-7deg) scale(1.08); }
58% { transform: rotate(-12deg) scale(1.04); } 75% { transform: rotate(-8deg) scale(0.95); }
100% { opacity: 0; transform: rotate(-12deg) scale(1); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); }
} }
@media (max-width: 1120px) { @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(() => { stampTimerRef.current = window.setTimeout(() => {
setCardExiting(true); setCardExiting(true);
stampTimerRef.current = null; stampTimerRef.current = null;
}, 90); }, 160);
advanceTimerRef.current = window.setTimeout(() => { advanceTimerRef.current = window.setTimeout(() => {
advanceCard(); advanceCard();
advanceTimerRef.current = null; advanceTimerRef.current = null;
}, 760); }, 700);
} catch (err: any) { } catch (err: any) {
resetTimeout(stampTimerRef); resetTimeout(stampTimerRef);
resetTimeout(advanceTimerRef); resetTimeout(advanceTimerRef);