时间戳

首页 > 解决方案 > 两个 div 之间的反应弹簧过渡中的生涩运动

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

CodeSandbox.io 中的示例

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

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

.ui {
  width: 100%;

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

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

标签： reactjsreact-spring

解决方案

你是对的问题是，第一个 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 }
});

推荐阅读