-
-
Notifications
You must be signed in to change notification settings - Fork 8.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(v2): animate dropdown properly #3603
Conversation
Deploy preview for docusaurus-2 ready! Built with commit 93ebafb |
c532a74
to
36a0196
Compare
@@ -64,6 +64,23 @@ function DocSidebarItemCategory({ | |||
return isActive ? false : item.collapsed; | |||
}); | |||
|
|||
const menuListRef = useRef<HTMLUListElement>(null); | |||
const [menuListHeight, setMenuListHeight] = useState<string | undefined>( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Of course, we can eliminate to create a new state for storing the height and set it via menuListRef.current.style.height
, but it seems to me better to do this using React.
36a0196
to
b4c9b97
Compare
Not sure exactly why but the DocsSidebar transition does not always work reliably. Sometimes there's some jank. Also it seems to not work great for multiple nesting levels (see Guides collapsing transition) |
What exactly is wrong? I need screenshots or videos because I don't see any issues with transition. |
I don't understand anyway, what is the problem?
Can't reproduce this. Anyway, I do the animation (transition) with CSS, I only set the height so that the CSS transition is possible 🤷♂️ |
The 2nd is harder to reproduce. Sometimes I can't even make it happen 🤪 But the first is easy: when you click on "Guides" while it's expanded, the "Docs" subcategory also collapses, but its collapsing is not animated (Introduction / MD Features / Versioning disappear instantly). Maybe slowing down the animation would make it easier to see. Is it expected that the subcategory also collapse when a parent collapse? That seems weird to me. |
Yes, this is how CSS transition works, I don't see a big issue with that. However, I did find bug when collapsed back nested dropdowns. I ended up simplifying the code, so the transition should work better now. |
} | ||
|
||
:global(.menu__list-item--collapsed) :global(.menu__list) { | ||
height: 0px !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since we set the height dynamically via style
attr, it will be prioritized over the class name, so to avoid this we had to use !important
rule. This won't be moved to Infima, only for Docusaurus code base.
let's merge this for now and see if users give us feedbacks |
Motivation
Currently, in Infima we have height transition CSS property, but it won't work unless the element's height is explicitly specified.
This PR sets the dropdown height at click time so that the CSS transition can work as expected.
The desktop implementation looks trickier because we can have nested dropdowns, so the final height can be dynamic (depending on whether the nested dropdown is expanded or collapsed).
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Preview.
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)