Animate height change when content changes
See original GitHub issueIs your feature request related to a problem? Please describe.
In my setup, I have state dictating view/edit mode. When in edit mode, a few more buttons appear and the modal’s height is automatically readjusted since I have adjustToContentHeight
enabled.
Describe the solution you’d like The height changes as expected, though unfortunately it is jarring. Is there anyway of having the height animate up, rather than snap to the new adjusted height? Something I envision is similar to the “snapping list” example you have, though instead of manually swiping up, have it be on a state change.
Describe alternatives you’ve considered I could just have a full screen modal, but it’s not as pretty.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:3
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Using CSS Transitions on Auto Dimensions
The max-height will continue transitioning, but the real height will stop changing once it reaches the end of its content. This will be...
Read more >Animating height - the right way - freeCodeCamp
Animating height can be a huge pain. ... This will cause any changing content to overflow the container instead expanding its parent.
Read more >How To Do CSS Transitions With Height: Auto - Carl Anderson
Method 1: Use transform. Despite its rampant use, you should avoid CSS transitions on the height or width properties (among some others).
Read more >How can I transition height: 0; to height: auto; using CSS?
Save this answer. Show activity on this post. A visual workaround to animating height using CSS3 transitions is to animate the padding instead....
Read more >Animate "height" with CSS Transitions - CodePen
For animate the "height" of element with CSS Transitions you need use "max-height". If use the "height: auto", the effect not works. Is...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi,
Yes, this is definitely something I would like to have in the library. It would go through props, probably
animateHeightChangeEnabled
.I don’t have time to look at it right now, but if anyone wants to look at it and implement the feature, feel free. I will look at it at some point, but not any time soon.
PS: Sorry for the late reply, I was on holidays.
I’m closing this feature request. Feel free to open a PR if you want the feature to be integrated in Modalize. Cheers.