React - 在幻灯片之间转换的轮播，react-spring

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，感谢分叉！ :)

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