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.
30 lines
1.8 KiB
Markdown
30 lines
1.8 KiB
Markdown
## 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
|
|
<!-- No existing specs to modify -->
|
|
|
|
## 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-motion` media query
|
|
- **Performance**: CSS transitions are GPU-accelerated; no JS animation loops
|