onAnimationEnd callback should be executed after content is hidden

First of all, thanks for this lib!

I think onAnimationEnd callback should be executed after content is hidden because one may need to remove the content on the callback itself. I’ve just encountered this issue myself.

Right now, it is not possible to remove the animated content inside the onAnimationEnd callback in a synchronous way since your lib will complain when trying to access this.contentElement to hide the removed content.

By shifting the order in which content is hidden and onAnimationEnd callback is executed, we get the best of both worlds, don’t you think?

To workaround this limitation I’m making the removal operation asynchronous so your lib can hide content before removal but it’s a bit hacky for my taste.

Ping me if you want me to make a PR for you.

[jakoandersen]

Works like a charm, thank you once again!

For anyone interested, this was my final solution: (i don’t have a button that triggers the toggle, put a received prop (condition) via redux):

interface Props {
    dispatch: any;
    groupOption: GroupOption;
    condition: boolean;
}

interface State {
    hide: boolean;
    height: number | string;
}

class GroupConditionContainer extends React.PureComponent<Props, State> {

    componentWillReceiveProps(nextProps: Readonly<Props>, nextContext: any): void {
        this.setState({
            height: nextProps.condition ? 'auto' : 0,
            hide: false
        });
    }

    constructor(props: Props) {
        super(props);
        this.state = {
            height: props.condition ? 'auto' : 0,
            hide: !props.condition
        };
    }

    render() {
        const { height, hide } = this.state;

        return (
            <AnimateHeight
                duration={500}
                height={height}
                animateOpacity={true}
                onAnimationEnd={() => {
                    if (height === 0) {
                        this.setState({ hide: true });
                    }
                }}
            >
                {!hide && this.props.children}
            </AnimateHeight>
        );
    }
}

[Stanko]

Try this: https://codesandbox.io/s/mm6yy0llv9

I was writing the previous snippet out of my head. But thank you, as I discovered a tiny bug I introduced with v2.

Cheers!