search

Stanko / react-animate-height

Lightweight React component for animating height using CSS transitions. Slide up/down the element, and animate it to any specific height.
https://muffinman.io/react-animate-height
MIT License
758 stars 53 forks source link

box-shadow is rendering strangely #101

Closed adammo94 closed 4 years ago

adammo94 commented 4 years ago

So If I don't set any margins to div I want to animate height of, it won't show box-shadow correctly. Shadow(s) will appear only after animation is over. When I set margins it renders shadows correctly throughout the animation.

Simple example: https://codesandbox.io/s/react-animate-height-basic-example-forked-9vhwd

Stanko commented 4 years ago

Hello @adammo94 That is intended behavior, during the animation height needs to have overflow: hidden meaning that box shadow will be cut off. If you want to have shadows apply it to theAnimateHeight element directly.

Check the example here: https://codesandbox.io/s/react-animate-height-basic-example-forked-3wl3g

Cheers!

adammo94 commented 4 years ago

Yes, but then what If I want many elements inside one container and want those elements to have separate shadows?

Stanko commented 4 years ago

Unfortunately, this approach relies on overflow: hidden. You can try the max-height transitions but that approach has other issues.