React-旋转木马，在幻灯片之间转换，反作用弹簧

Question

我目前已经制作了一个转盘组件，我正在将数据传递给它，但我想在切换数据之间添加一个转换。

我听说很多人推荐react spring，所以我想试试。我目前正在尝试实现useTransition钩子，但它并没有按预期工作。

当用户按下"左"/"右"按钮时，我只想淡入/淡出数据。目前，它开始淡化我的内容，但随后创建了我的旋转木马的克隆，并且没有淡化。。。我不确定我做错了什么，或者这是否是我应该使用的正确钩子？

最终，当内容淡入时，我更喜欢交错动画在每个元件之间具有一些延迟。例如：标题，然后是价格，然后是描述等会逐渐消失，但每次之间都有300毫秒的延迟要素

这是我目前拥有的：

const mod = (n: any, m: any) => ((n % m) + m) % m;
const CarouselContainer: React.FC = () => {
const [index, setIndex] = useState(0);
const handlePrev = useCallback(() => {
setIndex(state => mod(state - 1, data.length));
}, [setIndex]);
const handleNext = useCallback(() => {
setIndex(state => mod(state + 1, data.length));
}, [setIndex]);
const transitions = useTransition([index], (item: number) => item, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
});
return (
<>
{transitions.map(({ item, props, key }) => (
<Carousel
prevClick={handlePrev}
icon={data[item].icon}
title={data[item].title}
price={data[item].price}
description={data[item].description}
href={data[item].href}
nextClick={handleNext}
style={props}
key={key}
/>
))}
</>
);
};

有相当多的代码，所以我提供了一个CodeSandBox，fork是apprated！：(

Answer 1

当装载和卸载在转换期间发生时，新元素和旧元素会同时在dom中。出于这个原因，大多数时候我使用带有转换的绝对定位。这样变化就很好地融合在一起了。

为此，您必须在此处更改为position: absolute：

const StyledWrapper = styled.div`
position: absolute;
display: grid;
grid-template-columns: auto auto 20% 20% 1fr auto auto;
grid-template-rows: 3em 1fr auto 1fr 3em;
grid-gap: 0;
`;

我会尝试添加一些动作：

const transitions = useTransition([index], (item: number) => item, {
from: { opacity: 0, transform: 'translateX(-420px)' },
enter: { opacity: 1, transform: 'translateX(0px)' },
leave: { opacity: 0, transform: 'translateX(420px)' }
});

这是您修改后的代码：https://codesandbox.io/s/empty-rgb-xwqh1

接下来，您将需要根据按下的按钮来处理移动的方向。以下是一个例子：https://codesandbox.io/s/image-carousel-with-react-spring-usetransition-q1ndd