Как я могу сделать эту анимацию с ReactCSSTransitionGroup? - PullRequest
Новая
       17

Как я могу сделать эту анимацию с ReactCSSTransitionGroup?

0 голосов
/ 14 марта 2019

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

Я использую эту библиотеку react-addons-css-transition-group

Мой пример здесь https://codesandbox.io/s/j235x756o5

Как я могу сделать переходы более плавными и не перекрывать друг друга? 

class App extends React.Component {
  state = {
    gameState: "start"
  };

  renderGameState = state => {
    return (
      <div>
        {(() => {
          switch (state) {
            case "start":
              return (
                <ReactCSSTransitionGroup
                  transitionName="example"
                  transitionEnterTimeout={500}
                  transitionLeaveTimeout={300}
                >
                  <div className="gameBox" key="1">
                    <h1>start</h1>
                    <button
                      onClick={() => this.setState({ gameState: "playing" })}
                    >
                      Next
                    </button>
                  </div>
                </ReactCSSTransitionGroup>
              );
            case "playing":
              return (
                <ReactCSSTransitionGroup
                  transitionName="example"
                  transitionEnterTimeout={500}
                  transitionLeaveTimeout={300}
                >
                  <div className="gameBox" key="2">
                    <h1>Playing</h1>
                    <button onClick={() => this.setState({ gameState: "end" })}>
                      Next
                    </button>
                  </div>
                </ReactCSSTransitionGroup>
              );
            case "end":
              return (
                <ReactCSSTransitionGroup
                  transitionName="example"
                  transitionEnterTimeout={500}
                  transitionLeaveTimeout={300}
                >
                  <div className="gameBox" key="2">
                    <h1>You Win, wanna play again?</h1>
                    <button
                      onClick={() => this.setState({ gameState: "start" })}
                    >
                      Next
                    </button>
                  </div>
                </ReactCSSTransitionGroup>
              );
          }
        })()}
      </div>
    );
  };

  render() {
    const { gameState } = this.state;
    return (
      <div className="App">
        <h1>Help with transitions</h1>
        <div className="container">{this.renderGameState(gameState)}</div>
      </div>
    );
  }
}

С этими стилями: 


.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
...