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:
+1
-1
@@ -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>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user