React

by Abdul Ahmad

HTML

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

CSS

.App {
  margin: 0;
  padding: 0;
}

.page1 {

  background-color: blue;
    margin:0;
    padding:0;
    z-index:8;
    top:0;
    left:0; 
    position:fixed;
    width:100%;
    height:100%;  

}

.page2 {

  background-color: red;
  margin:0;
  padding:0;
  z-index:8;
  top:0;
  left:-100%; 
  position:fixed;
  width:100%;
  height:100%;  
}

.slidIn {
  left: 0;
}

.slideIn {
  animation: slideIn 0.5s forwards;
  -webkit-animation: slideIn 0.5s forwards;
}

.slideOut {
  animation: slideOut 0.5s forwards;
  -webkit-animation: slideOut 0.5s forwards;
}

@keyframes slideIn {
  100% { left: 0; }
}

@-webkit-keyframes slideIn {
  100% { left: 0; }
}

@keyframes slideOut {
  100% { left: 100%; }
}

@-webkit-keyframes slideOut {
  100% { left: 100%; }
}


.page2Visible {

  visibility: visible;
  opacity: 1;
}

React

class TodoApp extends React.Component {
	sliding = false;
  state = {
    page2Class: "",     
  };
  
  handleClick = () => {
  	if (this.sliding) return;
  	this.sliding = true;
		this.setState({ page2Class: 'slideIn' }, () => {
    	setTimeout(() => {
      	this.setState({ page2Class: 'slidIn slideOut' }, () => {
        	setTimeout(() => {
          	this.setState({ page2Class: '' }, () => {
            	this.sliding = false;
            });
          }, 600)
        });
      }, 2000)
    });
  };
  
  render() {
    const { page2Class } = this.state;
    return (
      <div>
        <div className='page1' onClick={this.handleClick}>Page 1</div>
        <div className={`page2 ${page2Class}`}>Page 2</div>
      </div>
    )
  }
}

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