Skip to content

feat: add mobile TOC animation#1326

Open
powerfullz wants to merge 8 commits intoCaiJimmy:masterfrom
powerfullz:feat/mobile-toc-animation
Open

feat: add mobile TOC animation#1326
powerfullz wants to merge 8 commits intoCaiJimmy:masterfrom
powerfullz:feat/mobile-toc-animation

Conversation

@powerfullz
Copy link
Copy Markdown
Contributor

This pull request refactors and enhances the mobile slide animation logic for both the main menu and the article Table of Contents (TOC). It introduces a shared animation module, improves accessibility and responsiveness, and updates related styles for a smoother user experience, especially on mobile devices.

Shared Slide Animation Core:

  • Introduced a new slideAnimation.ts module that centralizes slide open/close logic, ensuring consistent and accessible animations for both the mobile menu and TOC. The implementation includes reduced-motion support, transition lifecycle handling, and inline style cleanup.

Mobile Menu Refactor:

  • Refactored menu.ts to use the new shared slide animation utilities, replacing the legacy slideUp/slideDown code. The menu now respects reduced-motion settings, handles animation state more robustly, and ensures the menu closes cleanly on window resize.

Mobile TOC Animation:

  • Added a new mobileToc.ts module that applies the shared slide animation logic to the article TOC. This enables smooth expand/collapse behavior for the TOC on mobile, with proper handling of animation state, reduced-motion, and window resizes.
  • Integrated the mobile TOC setup into the main initialization flow in main.ts. [1] [2]

Accessibility and Style Improvements:

  • Updated TOC styles to prevent unwanted transitions during collapsing (:not(.toc-collapsing)), disable tap highlight, prevent text selection on the TOC title, and use a more consistent transition duration for SVG rotation. [1] [2] [3] [4]
output.webm
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants