在 react div 之间滑动动画 -

Question

我正在使用 react-transition-group 来帮助管理元素之间的过渡。我正在尝试实施一个测验，在用户回答一个问题后，问题会滑过另一个问题。然而，我的过渡使得 div 垂直堆叠。我希望它能像卡片一样滑过。我有这个 codesandbox 我所做的。

相关代码：

过渡组

 renderQuestion = () => {
    const question = this.questionsToAnswer[this.state.currentQuestionIndex];

    return (
      <div
        style={{
          display: "flex",
          flexDirection: "row"
        }}
      >
        <TransitionGroup className="slide-group">
          <CSSTransition
            classNames="slide"
            timeout={{ enter: 500, exit: 500 }}
            key={`${this.state.currentQuestionIndex}`}
          >
            <div>
              <div
                style={{
                  fontFamily: "Oswald",
                  fontStyle: "normal",
                  fontWeight: 500,
                  fontSize: "28px",
                  letterSpacing: "0.05em",
                  color: "#003E4C",
                  marginBottom: "10px",
                  width: "700px"
                }}
              >
                {question["description"]}
              </div>
              <div>{this.renderRadioQuestion(question["answers"])}</div>
            </div>
          </CSSTransition>
        </TransitionGroup>
      </div>
    );
  };

styles.css

/* ANIMATIONS */
.slide-enter {
  transform: translateX(100%);
}
.slide-enter-active {
  transform: translateX(0%);
  transition: transform 500ms ease-in-out;
}
.slide-exit {
  transform: translateX(0%);
}
.slide-exit-active {
  transform: translateX(-100%);
  transition: transform 500ms ease-in-out;
}

/*  not sure how to style this so that i can transition divs nicely*/
.slide-group {
  /* display: flex;
  flex-wrap: nowrap; */
}

Answer 1

同时平移 y 轴以防止垂直堆叠。

.slide-exit {
  transform: translate(0%, -100%);
}
.slide-exit-active {
  transform: translate(-100%, -100%);
  transition: transform 500ms ease-in-out;
}

代码沙盒：https://codesandbox.io/s/jolly-worker-xht4i?file=/src/styles.css

Answer 2

感谢 95faf8e76605e973 我最终使用了以下样式

.slide-exit {
  transform: translate(-100%, 0%);
}
.slide-exit-active {
  transform: translate(-200%, 0%);
  transition: transform 500ms ease-in-out;
}


.slide-group {
  display: flex;/* 
  flex-wrap: nowrap; */
}

在 react div 之间滑动动画 -

Slide animation between react divs -

css

css-transitions

reactjs

react-transition-group