Reactjs 两个div之间的弹簧过渡中的急动运动

我正在使用

react-spring

为用户选择的项目的“附加信息”框创建动画。遵循文档中的说明。我为我的用例提供了一个版本：

const Display = ({ item }) => (item ? <p>Index #{item}</p> : <div />);

const AnimatedDisplay = ({ item }) => {
  const transitions = useTransition(item, i => i, {
    from: { transform: "translate3d(150%, 0,0)", opacity: 0 },
    enter: { transform: "translate3d(0%, 0,0)", opacity: 1 },
    leave: { transform: "translate3d(-150%,0, 0)", opacity: 0 }
  });

  return (
    <div className="ui">
      {transitions.map(({ item: i, key, props }) => (
        <animated.div key={key} style={props}>
          <Display item={i} />
        </animated.div>
      ))}
    </div>
  );
};

---

我尝试过使用flex和不使用flex的多次迭代，但问题完全相同。有人能告诉我在这个例子中做错了什么吗？

你是对的问题是，第一个div的不透明度逐渐降低。当它变为0后，它将被删除。这时第二个div会有点抖动，因为在flex布局中，第一个div的空间变得可用。 最简单的解决方案是使用绝对布局。因此，两个div将相互重叠。 可以将位置样式插入到UseTransition。例如：

const transitions = useTransition(item, i => i, {
  from: { transform: "translate3d(150%, 0,0)", opacity: 0, position: "absolute" },
  enter: { transform: "translate3d(0%, 0,0)", opacity: 1 },
  leave: { transform: "translate3d(-150%,0, 0)", opacity: 0 }
});

---

您是对的问题是，第一个div的不透明度逐渐降低。当它变为0后，它将被删除。这时第二个div会有点抖动，因为在flex布局中，第一个div的空间变得可用。 最简单的解决方案是使用绝对布局。因此，两个div将相互重叠。 可以将位置样式插入到UseTransition。例如：

const transitions = useTransition(item, i => i, {
  from: { transform: "translate3d(150%, 0,0)", opacity: 0, position: "absolute" },
  enter: { transform: "translate3d(0%, 0,0)", opacity: 1 },
  leave: { transform: "translate3d(-150%,0, 0)", opacity: 0 }
});