Initially Opened Content not Animating

[SandMoshi]

I have content inside a div that I want to collapse. The collapse/expand works but is not animated.

The readme says the following:

initially opened Collapse elements will be statically rendered with no animation. You can override this behaviour by using initialStyle prop

I tried adding initialStyle with no success. Keep in mind, the content being collapsed is dynamic and I cannot set a specific height.

<div className='sectionContent' id="nav_el_2">
     <Collapse isOpened={collapsed} initialStyle={{height: '0px', overflow: 'hidden'}}>
                    {renderTrades()}            
       </Collapse>
 </div>

[nkbt]

You need to add css transition so you have animation The quickest way would be to set it for global css classname ReactCollapse-collapse like ‘transition: height 200ms’ or smth like that

[ortigozamatias]

You need to add css transition so you have animation The quickest way would be to set it for global css classname ReactCollapse-collapse like ‘transition: height 200ms’ or smth like that

It works perfectly. However, wouldn't it be bad for performance to animate height property?

[nkbt]

Well I mean the whole idea is to animate height, you cannot animate height without animating height... I’m using it in many places in quite heavy/busy pages and have no issues even on iPhone 6s. Of course it is all relative and in some cases you can skip animations for the sake of speed. Your choice

[SandMoshi]

ReactCollapse-collapse

Thank you, it worked. I'd like to point out a typo though, ReactCollapse--collapse is the correct class name.

[nkbt]

Thank you for correction.

I was replying from my phone, so did not copy/paste from readme but typed it in