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

Question

我制作了一个推荐轮播，我想在其中集成一个 springs 反应动画。我只使用 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

Answer 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

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

Elements stacking over each other instead of transitioning in spring react

javascript

css

reactjs

react-spring

css-in-js