Javascript React-带幻灯片之间转换的转盘，React弹簧

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

我听过很多人推荐react spring，所以我想试试。我目前正在尝试实现

useTransition

hook，但它没有按预期工作

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

最终，我更喜欢内容淡出时的交错动画 在每个元素之间有一些延迟。例如：标题，然后价格，然后 描述等将淡入，但每种描述之间有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}
        />
      ))}
    </>
  );
};

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]）；
常量handleNext=useCallback（（）=>{
setIndex（state=>mod（state+1，data.length））；
}，[setIndex]）；
常量转换=使用转换（[索引]，（项目：编号）=>项目{
发件人：{opacity:0}，
输入：{opacity:1}，
左：{不透明度：0}
});
返回(
{transitions.map（{item，props，key}）=>(
))}
);
};

---

有相当多的代码，所以我提供了一个，forks很受欢迎！：）

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

为此，您必须在此处更改为

位置：绝对

：

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)' }
  });

这是您修改过的代码：

---

接下来，您需要根据按下的按钮来处理移动的方向。这里有一个例子：

是否有一种方法可以仅仅转换内容而不是整个旋转木马？而且，它没有完全淡出内容，然后又重新进入？我尝试添加一个duration

config:{duration:1000}

，但它在淡出完成之前会淡入？您可以将动画放到任何您想要的div中。如果你愿意，可以放在旋转木马里。我在页面上添加了一些移动，这样你就可以更好地了解正在发生的事情。我更新了我的答案。嗨，乔丹。你解决了这个问题吗？我和你有同样的问题。它开始淡入淡出，然后在没有平滑过渡的情况下完成淡入淡出。