Reakit: Hidden - unstable_animating not set to false when visible (or confusing documentation)

[EmilEriksen]

Currently the documentation for the unstable_animated prop says

If true, animating will be set to true when visible changes. It'll wait for stopAnimation to be called or a CSS transition ends. If it's a number, stopAnimation will be called automatically after given milliseconds.

I'd expect this to mean that at the end of the animation animating would be set to false regardless of visible state but what is currently happening is that when visible becomes true, animating is set to true and remains true indefinitely. When visible becomes false, animating is set to true until the animation has finished at which point it's set to false (like I'd expect from the docs). See this CodeSandbox.

[open-collective-bot[bot]]

Hey @EmilEriksen :wave:,

Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.

If you use Reakit at work, you can also ask your company to sponsor us :heart:.

[diegohaz]

Thanks for opening the issue @EmilEriksen! :)

Just out of curiosity, what's your use case for needing animating to be false when the component is visible? I'm asking this because I'm pretty sure that it was let true to avoid an unnecessary re-render.

[EmilEriksen]

Thanks for the quick reply! Big fan of your work with this project btw :)

I don't necessarily think there's anything wrong with the way it works now but if it's currently working as intended, I think the documentation should probably be updated. The way it's phrased now gave me the impression that animating should be set to false regardless of visible state at the end of the animation.

That being said it would actually make my life easier with my current use case if animating was set to false at the end of the animation when the component is visible. I'm animating height and to do that, I set the height of my Hidden to 0 when visible is false and scrollHeight when visible is true. This works well but the scroll height of my Hidden can change on resize so now I need to listen to resize events to update the height. If animating was set to false at the end of the animation, I could simply set height to auto when animating is false.

[diegohaz]

I'm gonna find a time to check this later. If you wanna play with it before, it should work by simply removing the options.visible here:
https://github.com/reakit/reakit/blob/29c4456339306f020996c38276c2f9edf3f6697b/packages/reakit/src/Hidden/Hidden.ts#L56-L68

npm run storybook will show an animated example to test.