0

我制作了一个推荐旋转木马，我想在其中集成一个弹簧反应动画。我只使用 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 并让我的动画正常工作？密码箱

4

1 回答 1

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

于 2020-06-15T06:57:51.870 回答