元素相互堆叠而不是在弹簧中过渡会产生反应

Question

我做了一个推荐轮播，我想为它集成一个弹簧反应动画。我只用弹簧反应工作了几天，这是我以前从未见过的错误。元素相互堆叠。 对于我的过渡，我有：

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

我知道如果我键入position: absolute而不是 gridRow，动画将起作用。但是，我尝试制作动画的这个项目位于网格容器中，当我使用绝对时，它会破坏我的整个设计。有没有办法让我保持网格行并使我的动画工作？代码沙盒

Answer 1

useTransition有一点问题。这是退出而不是离开。它为我修复了彼此堆叠的东西。

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

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

<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