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
1. Global Accessibility Setup
- 1.1 Add
prefers-reduced-motionmedia query toindex.cssthat sets all animation and transition durations to 0.01ms
2. Course Selection Transitions
- 2.1 Add
transition: border-color 200ms, background-color 200msto the ElectiveSet container div inCourseSelection.tsx
3. Credit Bar Transitions
- 3.1 Add
transition: width 300ms ease-outto both the allocated and potential bar segments in the CreditBar component inSpecializationRanking.tsx
4. Status Badge Transitions
- 4.1 Add
transition: background 200ms, color 200msto the status badge span in the SortableItem component inSpecializationRanking.tsx
5. Expand/Collapse Animations
- 5.1 Refactor CreditLegend to always mount the content panel and use
max-height+overflow: hidden+transition: max-height 200ms ease-outinstead of conditional rendering - 5.2 Refactor AllocationBreakdown in SortableItem to always mount and use
max-height+overflow: hidden+transition: max-height 200ms ease-outinstead of conditional rendering
6. Mode Toggle Transition
- 6.1 Add
transition: background 150ms, box-shadow 150ms, color 150msto both mode toggle buttons inModeToggle.tsx
7. ModeComparison Banner Animation
- 7.1 Refactor ModeComparison in
Notifications.tsxto always render the banner div and useopacity+max-heighttransitions for enter/exit instead of returning null
8. Verification
- 8.1 Manually verify all transitions play correctly: pin/unpin courses, toggle mode, expand/collapse legend and breakdown, observe credit bars and status badges
- 8.2 Verify reduced-motion: confirm all animations are effectively instant when
prefers-reduced-motion: reduceis active - 8.3 Run existing tests to ensure no regressions from the refactored conditional rendering