Bill Ballou
7a8330e205
Animate course set pin/unpin with cross-fade content swap, credit bar width changes, status badge color transitions, expand/collapse panels (CreditLegend, AllocationBreakdown), mode toggle switching, and ModeComparison banner fade. Specialization rows flash on credit/status changes. Threshold markers animate position. All animations respect prefers-reduced-motion.
1.8 KiB
1.8 KiB
Why
UI state changes (course selection, status transitions, panel expand/collapse) happen instantly, making interactions feel abrupt. Adding subtle CSS transitions and animations will make the app feel more polished and help users track what changed after each action.
What Changes
- Add CSS transitions to course pin/unpin so the elective set smoothly shifts between its "open" and "pinned" states (border, background color, content swap)
- Animate credit bar width changes so users can visually follow how selecting a course redistributes credits across specializations
- Add expand/collapse transitions to CreditLegend and AllocationBreakdown instead of instant mount/unmount
- Animate status badge changes (e.g., "Achievable" → "Achieved") with a brief highlight or color transition
- Add a smooth transition to the ModeToggle active indicator when switching optimization modes
- Animate the ModeComparison notification banner entrance/exit
- Keep all animations CSS-only (transitions + keyframes) — no new runtime dependencies
Capabilities
New Capabilities
ui-transitions: CSS transition utilities and patterns for smooth state changes across all interactive components (course selection, credit bars, expand/collapse, status badges, mode toggle, notification banners)
Modified Capabilities
Impact
- Components affected: CourseSelection, SpecializationRanking, CreditLegend, ModeToggle, Notifications (ModeComparison)
- CSS: New transition declarations added to inline styles; possible new keyframe definitions in index.css
- Dependencies: None — CSS-only approach, no new packages
- Accessibility: All animations will respect
prefers-reduced-motionmedia query - Performance: CSS transitions are GPU-accelerated; no JS animation loops