class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      shouldRender: false,
      class: ''
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevState.show && this.state.show) {
      this.setState({
        shouldRender: true
      })
      setTimeout(() => {
        this.setState({ class: 'showDiv' })
      }, 0)
    }
    if (prevState.show && !this.state.show) {
      setTimeout(() => {
        this.setState({
          shouldRender: false
        })
      }, 1000)
      this.setState({ class: '' })
    }
  }

  render() {
    return (
      <div>
        <button
          style={{
            display: 'block',
            border: 'none',
            padding: '20px',
            background: 'blue',
            color: 'white',
            fontSize: '20px',
            margin: '10px',
            cursor: 'pointer'
          }}
          onClick={() => this.setState({ show: !this.state.show })}
        >
          Toggle Div
        </button>

        {this.state.shouldRender ? (
          <div className={`baseDiv ${this.state.class}`} />
        ) : null}

        <div
          style={{
            width: '200px',
            height: '200px',
            background: '#999',
            margin: '5px'
          }}
        />
     )
  }
}

export default App

.baseDiv {
  width: 200px;
  height: 200px;
  background: #333;
  margin: 5px;
  transition: all 1s ease;
  transform: translateY(-200%);
}
.showDiv {
  transform: translateY(0%);
}