Demo

See on:

Sandbox

Gif

Youtube

Usage

<HeightAnimatedContainer duration={300} transitionTimingFunction="ease">
	<AnyDynamicList>
		{anyChildren}
	</AnyDynamicList>
</HeightAnimatedContainer>

Attention

If you use another HeightAnimatedContainer inside HeightAnimatedContainer, you must specify a reference of a parent.

<HeightAnimatedContainer ref={parent} duration={300}>
	<AnyDynamicList>
		<HeightAnimatedContainer parentHeightAnimatedContainer={parent} duration={300}>
			{someOtherChildren}
		</HeightAnimatedContainer>
		{anyChildren}
	</AnyDynamicList>
</HeightAnimatedContainer>

If you use CSSTransition which has unmountOnExit property enabled, then you need to call UnmountCSSTransitionExited static method in OnExited event.

<HeightAnimatedContainer ref={parent} duration={300}>
    <CSSTransition
        key={i}
        timeout={animationDurationMS}
        classNames={{
            enterActive: fallDown,
            exitActive: fallDownR,
        }}
        unmountOnExit
        onExited={() => HeightAnimatedContainer.UnmountCSSTransitionExited(parent) }
        >
        <SomeComponent></SomeComponent>
    </CSSTransition>
</HeightAnimatedContainer>