fix(v2): animate dropdown properly #3603
Conversation
|
Deploy preview for docusaurus-2 ready! Built with commit 93ebafb |
lex111
force-pushed
the
lex111/animate-dropdown
branch
from
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.
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.
lex111
force-pushed
the
lex111/animate-dropdown
branch
from
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. |
|
The multi-level collapsing of Guides seem to collapse subcategories first:
Here sometimes the category collapses without anim. Not sure how to reproduce this consistently but it happens maybe 5% or 10% of the time when I click randomly on a category:
|
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.
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.)