forceInitialAnimation not working

[yyynnn]

Hello! Nice lib!

I'm having problem with initial render.
forceInitialAnimation prop seem to have no influence. I have this simple component:

import React from 'react'
import { render } from 'react-dom'
import { Collapse } from 'react-collapse'

render(
  <Collapse isOpened={true} forceInitialAnimation={false}>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos reiciendis delectus nesciunt velit
    odit blanditiis consectetur dolores nulla eaque, illum at eveniet, fugit necessitatibus voluptatum illo
    numquam sit consequatur consequuntur?
  </Collapse>,
  document.getElementById('app')
)

And it renders always with initial animation from 0 to node height.
This component is rendered without any other libs in project.

I'm using react 16.3. Was using react-collapse 4 and then 5 alpha, same result.

[spacebaboon]

Me too. forceInitialAnimation is supposed to default to true, but I always get the animation on component mount. setting the prop to false has no effect.

No important differences to yyynnn's details above.

[nkbt]

The default is false.

With this option set to true you can enforce initial rendering to be smoothly expanded from 0

By default component is rendered in its initial state without any extra animations.

[nkbt]

If you mount a new component and its initial height is calculated as 0, then something is added to it - height is recalculated to X, in this case animation will be from 0 to X and there is no way to figure out if it was or was not intentional. You need to ensure that content on mount is of correct size.

If we are talking about mounting some children inside Collapse - then Collapse will animate. It is by design.

[nkbt]

@yyynnn you can subscribe to onMeasure and see that it was probably called first with 0 then with actual size. CSS/DOM is smth we cannot override unfortunately so it is up to you how to make sure content size can be determined correctly on a step one

Also if you are doing server-side rendering + media-query (or its JS alternative) then content height will be most likely determined incorrectly. There is a quite unpleasant way dealing with it, but it requires quite a bit of work (some conditional disabling of animation)

PS: 5 alpha does not have forceInitialAnimation flag at all. It is pretty much complete rewrite from scratch.

[spacebaboon]

If we are talking about mounting some children inside Collapse - then Collapse will animate.

What else can be inside a Collapse except children? do you mean React component children will animate but static markup will not? Is there a way to render React components inside a Collapse without initial animation?

[nkbt]

In a demo example there is one specifically for this case - render fully opened collapse without animation on the first render. I do not really understand what kind of problem you are having. Codepen would help.

[nkbt]

As new react-collapse@5.0.0 is released https://github.com/nkbt/react-collapse/releases/tag/v5.0.0 this issue should be solved

See initialStyle prop and example/App/ForceInitialAnimation.js example

Please feel free to re-open if the issue persists