DEV Community

Discussion on: How to animate an auto-height element

Collapse
 
oncode profile image
Manuel Sommerhalder

Doesn't work if the parent element has display: none. Also the animation won't work.

But when you remove "display: none" prior to opening and after closing (when transition has finished), you can add "display: none" and everything will work. I set display: none like this in my library to avoid screen readers reading the content and preventing that elements can be focused (e.g. when tab is used).

Thread Thread
 
mrmurphy profile image
Murphy Randle

Right, so you can't use getBoundingClientRect to get the size of the child container when the parent has display: none?. So you have to first remove display:none, then measure, then animate?

Thread Thread
 
oncode profile image
Manuel Sommerhalder • Edited

Exactly, all getBoundingClientRect properties would be 0 when the parent has display: none.