元素相互堆叠而不是在弹簧中过渡

【问题标题】：Elements stacking over each other instead of transitioning in spring react元素相互堆叠而不是在弹簧中过渡
【发布时间】：2020-10-04 08:12:34
【问题描述】：

我制作了一个推荐旋转木马，我想在其中集成一个弹簧反应动画。我只使用 spring react 几天，这是我以前从未见过的错误。元素相互堆叠。对于我的过渡，我有：

 const transitions = useTransition(current, item => item.key, {
        from: {  gridRow: '2', opacity: 0 },
        enter: { opacity: 1 },
        exit: { opacity: 0 },
    })

我知道，如果我键入 position: absolute 而不是 gridRow，动画将起作用。然而，我试图制作动画的这个项目是在一个网格容器中，当我使用 absolute 时，它会破坏我的整个设计。有没有办法我可以保留那个 gridRow 并让我的动画工作？ codesandbox

【问题讨论】：

标签： javascript css reactjs react-spring css-in-js

【解决方案1】：

useTransition 出了点小问题。这是退出而不是离开。它为我修复了彼此之间的堆叠。

  const transitions = useTransition(current, item => item.key, {
    from: { position: "absolute", opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

现在您可以将 transition.map 与另一个具有 gridRow 属性的 div 包装起来，以防止您的布局中断。它需要进一步的样式，但我认为您可以在此基础上进行构建：

  <div style={{ gridRow: "2", position: "relative", width: "100%" }}>
    {transitions.map(({ item, props, key }) => (
      <animated.div key={key} style={props}>
        <QuoteParagraph>
          <Quote>
            <FaQuoteLeft />
          </Quote>
          {item.quote}
          <Quote>
            <FaQuoteRight />
          </Quote>
        </QuoteParagraph>
        <QuotePerson>-{item.client}</QuotePerson>
      </animated.div>
    ))}
  </div>

完整示例：https://codesandbox.io/s/mutable-waterfall-w8wvd?file=/src/App.js

【讨论】：

感谢您的浏览！