Skip to content
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

Animation doesn't work inside bounded flexboxes #89

Closed
itayganor opened this issue Apr 17, 2020 · 4 comments
Closed

Animation doesn't work inside bounded flexboxes #89

itayganor opened this issue Apr 17, 2020 · 4 comments

Comments

@itayganor
Copy link

When <AnimateHeight/> is inside a bounded flexbox (a flexbox that has a limit in its main flex axis, i.e. a div with display: flex; flex-direction: column; height: 100px;), the variable height value during the animation doesn't count.
In this case, <AnimateHeight/> should consider itself as a flexbox child, and have flex-shrink: 0 for the height property to work as expected.

Code example

https://codesandbox.io/s/react-animate-height-flex-tsu4k
Press Prepend random number to add items to the top of the list. Click it enough times until the whole .logs div is full (in terms of height). Then, watch how the height property doesn't do anything.

Expected behavior

Height should be animated.

Possible Solution

Add flex-shrink: 0 to the animated div, while animated.
Currently achievable by:

<AnimateHeight style={{flexShrink: 0}}>content</AnimateHeight>

But there's no actual reason to explicitly set it every time.

Your Environment

  • Version used: 2.0.20
  • OS: Windows 10
  • Browser: Chrome 81
@Stanko
Copy link
Owner

Stanko commented Apr 17, 2020

Nice catch, I'll see what I can do. Adding flex-shrink seems a bit hacky though.

@itayganor
Copy link
Author

Nice catch, I'll see what I can do. Adding flex-shrink seems a bit hacky though.

Why hacky? it's exactly what's happening; the animated div gets shrunk because flexbox takes other calculations into account before height values (or width when flex-direction: row;).
flex-shrink: 0 is like saying "Ay papa, let me decide my own size!"

@Stanko
Copy link
Owner

Stanko commented Apr 17, 2020

Sorry, I wasn't clear. It feels hacky to add styles that fix very specific issue.

EDIT: Honestly I feel this shouldn't be hard coded in the library itself. Instead user should add a class name and flex-shrink: 0 rule to that specific class. But it should be definitely covered by the library's documentation.

@Stanko
Copy link
Owner

Stanko commented Apr 18, 2020

I added "Gotchas" section to the readme to explain this scenario:
https://github.com/Stanko/react-animate-height#bounded-flexboxes

@Stanko Stanko closed this as completed Apr 18, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants