两个 div 之间的反应弹簧过渡中的生涩运动答案

【问题标题】：Jerky movement in react-spring transition between two divs两个 div 之间的反应弹簧过渡中的生涩运动
【发布时间】：2019-09-09 14:57:48
【问题描述】：

我正在使用react-spring 为用户选择的项目创建“附加信息”框的动画。遵循文档中的Simple Transition Demo。我为我的用例想出了一个版本：

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

Example in CodeSandbox.io

在示例中，单击Select 模拟单击随机项目，Clear 模拟不选择任何项目。当您单击 Select 和 Clear 时，它的行为符合我的预期。

我要解决的问题是，当您按两次Select 时，第二项进入并移向第一项，但在最终位置附近停止并在最后向前猛拉。从其他堆栈溢出答案看来，第一个 div 的某些方面仍在呈现。我的假设是这是我如何布局 CSS 的问题，但我无法弄清楚我应该做些什么不同：

.ui {
  width: 100%;

  display: inline-flex;
  justify-content: center;
}

我已经尝试了几次迭代，无论是否使用 flex，但问题完全相同。谁能告诉我在这个例子中做错了什么？

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

你是对的问题是，第一个 div 的不透明度逐渐降低。并且在它变为 0 后将被删除。那是第二个 div 有点抽搐的时候，因为在 flex 布局中，第一个 div 的空间变得可用。最简单的解决方案是使用绝对布局。所以 div 将在彼此之上。您可以将位置样式插入到 useTrasition。例如：

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

【讨论】：