React Animate Height

index.html

<div id="root"></div>
<div id="something"></div>

react-animate-height.markdown

React Animate Height

A Pen by Trey Piepmeier on CodePen.

License.

script.babel

const { CSSTransition } = ReactTransitionGroup;

class App extends React.Component {
    state = {
        showThing: true,
        text: 'Hello',
    }

    handleClick = () => {
        this.setState({
            showThing: false,
            text: 'Goodbye',
        })
    }
    
    reset = () => {
        this.setState({
            showThing: true,
            text: 'Hello',
        })
    }

    render() {
        const buttonStyle = {
            display: (!this.state.showThing) ? 'block' : 'none',
        };
        
        return (
            <div>
                <CSSTransition
                    in={this.state.showThing}
                    timeout={{ enter: 0, exit: 700 }}
                    unmountOnExit
                    classNames="example">
                    <Thing
                        text={this.state.text}
                        onClick={this.handleClick} />
                </CSSTransition>
                <button style={buttonStyle} onClick={this.reset}>Reset</button>
            </div>
        )
    }
};

class Thing extends React.Component {
    render() {        
        return (
            <h1 className="example" onClick={this.props.onClick}>
                {this.props.text}
            </h1>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-transition-group/dist/react-transition-group.min.js"></script>

style.scss

body {
    padding: 50px;
}

#something {
    height: 200px;
    background: rebeccapurple;
    width: 100%;
}

button { position: absolute; }

.example {
    height: 50px;
    background: #ccc;
    margin: 0;
    cursor: pointer;
}

.example,
.example-enter,
.example-enter.example-enter-active {
    transition: height 400ms ease, opacity 700ms ease;
}

.example-exit {
    // reverse of enter
    transition: opacity 300ms ease, height 400ms ease;
}

.example-enter {
    opacity: .01;
    height: 0;
}

.example-enter.example-enter-active,
.example-exit {
    opacity: 1;
}

.example-exit.example-exit-active {
    opacity: .01;
    height: 0;
}