TheFlow
|
894173c348
|
feat(phase3): implement smooth page transitions with fade effect
SUMMARY:
Implemented Phase 3 Task 3.5: Page Transitions - smooth fade transitions
between pages for improved perceived performance and user experience.
CHANGES:
1. Created page-transitions.js (new):
- PageTransitions class with fade out/in effects
- Attaches to all internal links automatically
- Excludes external links, downloads, and hash links
- Respects Ctrl/Cmd+click for new tab behavior
- 300ms transition duration
- Console logging for debugging
2. Updated tractatus-theme.css:
- Added page transition CSS section
- body fade-in/fade-out classes
- Respects prefers-reduced-motion for accessibility
- Smooth 0.3s opacity transitions
3. Added script to key pages:
- public/index.html
- public/architecture.html
- public/about.html
- public/researcher.html
- public/leader.html
- public/implementer.html
4. Regenerated tractatus-theme.min.css with new transitions
FEATURES:
✓ Smooth fade-out when clicking internal links
✓ Fade-in on page load
✓ Maintains navbar/footer during transition
✓ Improves perceived performance
✓ Accessible (respects reduced motion preference)
✓ Doesn't break Ctrl+click or right-click
UI_TRANSFORMATION_PROJECT_PLAN.md:
✓ Phase 3 Task 3.5: Page Transitions (COMPLETED)
🤖 Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-19 20:44:25 +13:00 |
|