Duration

Copy Code<style>
.content {
  width: 100px;
  padding: 10px;
  color: #787878;
  background-color: #fcf7f8;
  font-size: 13px;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  text-align: center;
  border: 1px solid rgba(0,0,0,.05);
}
</style>

Copy Codeclass App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div>
                <dl>
                    <dt>
                        Animate:
                    </dt>
                    <dd>
                        <button className="k-button" onClick={this.onClick}>Animate</button>
                    </dd>
                </dl>

                <Slide
                    transitionEnterDuration={800}
                    transitionExitDuration={1000}
                >
                    {children}
                </Slide>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);