React动画离开div内容

Question

我正在使用React和React Spring来制作一个问卷应用程序的动画。我希望调查表能在用户回答问题时使问题的离开/进入动画化。

我正在为应用程序使用React，并尝试使用React Spring来动画转换。问题是，当用户回答问题时，问题组件在离开之前会用新内容进行更新。

为了简化它，问题组件看起来像这样：

export default function Question({question, onAnswer}) {
const [answer, setAnswer] = useState(null);
return (
<animated.div ...>
{question.title}
<select>...{quesiton.options}...</select>
<button onClick={() => onAnswer(question.id, answer)}>Next</button>
</animated.div>
);
}

我创建了一个代码沙盒来说明我的问题：https://codesandbox.io/s/nostalgic-swartz-lhkj0?file=/src/AnimatedComponent.js

我该如何处理？在网络上找不到任何示例

谢谢！

Answer 1

您应该在转换映射中使用item属性，而不是直接在animated.div.中使用文本

{transitions.map(
({ item, key, props }) =>
item && (
<animated.div key={key} style={props}>
{item}
</animated.div>
)
)}