反应动画离开 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>
      )
  )}