motion: calm admin tab/drawer/popover/toast transitions
Deploy to route.crispygoat.com / deploy (push) Successful in 4m15s
Deploy to route.crispygoat.com / deploy (push) Successful in 4m15s
Follow-up to 9fcc514. The global motion pass hit the public site;
this targets the admin design system, which had its own animation
budget that was still producing positional movement on every
interaction.
Killed:
- TabSwitcher y:4 slide (every tab change in /admin)
- CommandPalette scale(0.98) panel pop
- ha-drawer-in: 100% translateX (full-screen sweep)
- ha-popover-in: translateY(-4px) + scale(0.98)
- ha-check-pop: cubic-bezier(0.34, 1.56, 0.64, 1) 1.15x overshoot
- slide-in-from-right: 100% translateX (toasts)
- dashboard-fade-up: 10px Y slide on every card
- tailwindcss-animate keyframes for slide-in-from-{left,right,top,bottom} and zoom-in-{90,95} (used by ToastContainer, LotDetailPanel)
Calmed:
- All durations cut to 120-200ms range with ease-out
- All keyframes that survived are opacity-only
Added a @media (prefers-reduced-motion: reduce) block scoped to
the admin selectors so users with that OS setting see instant
transitions across toasts/drawers/popovers/dashboard cards.
This commit is contained in:
@@ -278,15 +278,21 @@ export default function CommandPalette() {
|
||||
}}
|
||||
>
|
||||
{/* Local keyframes — scoped via the dialog's runtime so they don't
|
||||
leak into the global stylesheet. */}
|
||||
leak into the global stylesheet. The panel now fades in without
|
||||
the scale(0.98) start (removed — the slight scale combined with
|
||||
the backdrop fade read as a "pop" when the palette opened). */}
|
||||
<style>{`
|
||||
@keyframes cp-fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes cp-scale-in {
|
||||
from { opacity: 0; transform: scale(0.98); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
@keyframes cp-fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes cp-scale-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
}
|
||||
`}</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user