feat(11-02): add step transition animation with reduced-motion guard

- Add @keyframes step-in (opacity 0->1, translateY 8px->0, 200ms ease-out) to index.css
- Register --animate-step-in token in @theme block
- Add @media prefers-reduced-motion: reduce guard disabling animation
- Add key={state.currentStep} and animate-step-in class to step wrapper in App.tsx
This commit is contained in:
2026-04-01 13:28:38 +02:00
parent 3af06493ea
commit 9af58bc970
2 changed files with 19 additions and 1 deletions
+1 -1
View File
@@ -62,7 +62,7 @@ function WizardShell() {
) : ( ) : (
<> <>
<StepIndicator /> <StepIndicator />
<div className="mt-8"> <div key={state.currentStep} className="mt-8 animate-step-in">
{CurrentStep} {CurrentStep}
</div> </div>
</> </>
+18
View File
@@ -66,4 +66,22 @@
--color-on-success: var(--r2b-on-success); --color-on-success: var(--r2b-on-success);
--color-warning: var(--r2b-warning); --color-warning: var(--r2b-warning);
--color-on-warning: var(--r2b-on-warning); --color-on-warning: var(--r2b-on-warning);
--animate-step-in: step-in 200ms ease-out both;
}
@keyframes step-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.animate-step-in {
animation: none !important;
}
} }