Reactjs - переходите один div поверх другого с помощью слайд-анимации

У вас есть пара проблем, сначала вы должны сохранить ваши классы для анимации в вашем состоянии и обновить свое состояние, когда вы нажимаете на синее поле. Кроме того, ваши анимации и идентификаторы ключевых кадров записаны не одинаково:

у вас установлена ​​анимация animation: slide-in, тогда как идентификатор ключевых кадров - «slideIn», один из которых обозначен верблюдом, а другой - тире. Я скопировал ваш код в jsfiddle и должен работать: https://jsfiddle.net/ahmadabdul3/y6xsveL5/22/

также я изменил анимацию с translatex на свойство left, для него установлено значение left: -100px, а для анимации - left: 0

Я обновил jsfiddle, чтобы страница 2 скользила, ждала 2 секунды, а затем выдвигалась. Я использовал функцию обратного вызова setState и установил тайм-аут на 2 секунды, затем установил класс из slideIn в slideOut: https://jsfiddle.net/ahmadabdul3/y6xsveL5/29/

, затем после около 600 миллисекунд, я возвращаю класс в исходное состояние без дополнительного скользящего класса. Таким образом, если вы нажмете еще раз, он снова будет скользить

Я не уверен, что обратные вызовы setState - правильное решение, я думаю, что есть способ настроить анимацию из css, чтобы она выполняла слайд, а затем слайд.

Если вы хотите, чтобы страница 2 выдвигалась при нажатии, вы можете повторить метод click handle для страницы 1 и просто изменить класс на выдвигающийся

На самом деле я снова обновил код, потому что есть проблема, если вы щелкаете по синей странице, когда происходит скольжение, анимация сбрасывается, потому что он обновляет класс до завершения анимации, вам нужно следить за тем, происходит ли скольжение, вы не позволяете щелчку ничего делать, пока все анимация завершена: https://jsfiddle.net/ahmadabdul3/y6xsveL5/35/

окончательный код:

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: 'in-view 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>
    )
  }
}

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%;  
}

.in-view {
  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;
}

Изначально вы должны поддерживать состояние для текущего активного div. Каждый элемент div при нажатии кнопки скрывает этот конкретный элемент div и делает его активным. В приведенном ниже примере кода я дал высоту div в 500px, но вы можете указать высоту, как вам нужно. Здесь я использую свойство перехода easy-in-out для выполнения анимации скольжения вверх и вниз. Вы можете проверить код в https://jsfiddle.net/krishnauppili/okn4vbe0/5/

Вот код React (App.js): [ 114]

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        activeDiv: "div1",
    }
}

toggleDiv = () => {
    this.setState({
        activeDiv: this.state.activeDiv === "div1" ? "div2" : "div1",
    });
};

render() {
    return (
        <div className="App">
            <div className={this.state.activeDiv === "div1" ? "div1 show" : "div1 hide"} id="div1">
                Div 1
                <button type="button" onClick={this.toggleDiv}> Hide div1</button>
            </div>
            <div className={this.state.activeDiv === "div2" ? "div2 show" : "div2 hide"} id="div2">
                Div 2
                <button type="button" onClick={this.toggleDiv}> Hide div2</button>
            </div>
        </div>
    );
}}

Вот код CSS (App.css):

.div1{
    background-color: black;
}
.div2{
    background-color: green;
}
.div1,.div2{
    color:white;
}
.div1.show,.div2.show{
    height:500px;
    transition:  all 0.2s ease-in-out;
    padding-top: 50px;
    text-align: center;
}
.div1.hide,.div2.hide{
    text-align: center;
    height: 0;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}