两个 div 之间的 react-spring 转换中的抖动

Question

我正在使用 react-spring 为 "additional info" 框创建用户选择的项目的动画。遵循文档中的 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 的迭代，但问题完全相同。谁能告诉我在这个例子中做错了什么？

Answer 1

你是对的问题是，第一个 div 的不透明度逐渐降低。并且在它变为 0 后将被删除。那是第二个 div 有点乱的时候，因为在 flex 布局中，第一个 div 的 space 变得可用。最简单的解决方案是使用绝对布局。所以 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 }
});

两个 div 之间的 react-spring 转换中的抖动

Jerky movement in react-spring transition between two divs

reactjs

react-spring