React + Styled Components实现的Slider无过渡效果求助

核心问题分析 #

• Wrapper未接收slideIndex参数：你的Wrapper样式组件依赖props.slideIndex计算平移距离，但在使用<Wrapper>时没有传入该参数，导致transform: translateX(NaN)，过渡效果根本无法触发。
• 仅渲染当前幻灯片：你每次只渲染当前索引对应的Slide组件，切换索引时React会直接卸载旧组件、挂载新组件（因为key随当前幻灯片变化），完全没有利用Wrapper的平移逻辑，因此只会出现帧跳转。

修复代码 #

修改Slider组件，渲染全部幻灯片并传递slideIndex给Wrapper

const Slider = () => {
    const [slideIndex, setSlideIndex] = useState(0)
    const handleClick = (e, direction) => {
        e.preventDefault();
        if (direction === "left") {
          setSlideIndex(slideIndex > 0 ? slideIndex - 1 : sliderItems.length - 1);
        } else {
          setSlideIndex(slideIndex < sliderItems.length - 1 ? slideIndex + 1 : 0);
        }
    }
  return (
    <Container>
         <Arrow direction="left" onClick={(e)=>handleClick(e,"left")}>
            <ArrowLeftSharp />
        </Arrow>
        {/* 传入slideIndex props */}
        <Wrapper slideIndex={slideIndex}>
            {/* 遍历渲染所有幻灯片 */}
            {sliderItems.map(item => (
                <Slide key={item.id}>
                    <ImgContainer>
                        <Image src={item.img} />
                    </ImgContainer>
                    <InfoContainer>
                    <Title>{item.title}</Title>
                    <Description>{item.description}</Description>
                    <Button>{item.buttonText}</Button>
                    </InfoContainer>
                </Slide>
            ))}
        </Wrapper>
        <Arrow direction="right" onClick={(e)=>handleClick(e,"right")}>
            <ArrowRightSharp />
        </Arrow>
    </Container>
  )
}

补充Slide样式，确保宽度适配视口

const Slide = styled.div`
  width: 100vw;
  height: 100%;
  // 保留你原有Slide的其他样式
`;

const Wrapper = styled.div`
  height: 100%;
  display: flex;
  transition: all 0.5s ease;
  transform: translateX(${props => props.slideIndex * -100}vw);
`;

修复说明 #

修改后，Wrapper会包含所有幻灯片，当slideIndex变化时，Wrapper会通过CSS过渡动画平滑平移到对应位置，替代原来直接替换组件的逻辑，从而实现预期的轮播过渡效果。

内容的提问来源于stack exchange，提问作者idzczakp