React 动画留下 div 内容

Question

我正在使用 React 和 React-Spring 来制作问卷应用程序的动画。当用户回答一个问题时，我希望调查问卷为问题 leaving/enter 设置动画。

我正在为应用程序使用 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

您应该在过渡图中使用项目属性，而不是直接在 animated.div 中使用文本。

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

React 动画留下 div 内容

React animate leaving div content

animation

reactjs

react-spring