React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

button {
  margin-bottom: 10px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.slideLeft {
  animation-duration: 500ms;
	animation-name: slideLeft;
	animation-fill-mode: forwards;
}

.slideRight {
  animation-duration: 500ms;
	animation-name: slideLeft;
	animation-fill-mode: forwards;
}

@keyframes slideLeft {
	0% {
		transform: translate(0, 0);
		opacity: 1;
	}

	100% {
		transform: translate(-100%, 0);
		opacity: 0;
	}
}

@keyframes slideRight {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}

	100% {
		transform: translate(100%, 0);
		opacity: 1;
	}
}

React

class SlideBoxApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	slideIn: false
    }
  }
  
  toggleSlide() {
  	const { slideIn } = this.state
  	this.setState({slideIn: !slideIn})
  }
  
  render() {
  const { slideIn } = this.state
    return (
      <div>
        <button onClick={() => this.toggleSlide()}>slide in</button>
        <div className={`box ${slideIn? 'slideLeft' : ''}`}></div>
      </div>
    )
  }
}

ReactDOM.render(<SlideBoxApp />, document.querySelector("#app"))