在react divs-之间滑动动画

Question

我使用react-transition-group来帮助管理元素之间的转换。我正在尝试实现一个测试，在用户回答一个问题后，问题滑到另一个问题上。然而，我的转换使div垂直堆叠。我希望它能像卡片一样滑过去。我有一个我所做的代码沙盒。

相关代码：

过渡群

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

CodeSandBox：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; */
}