CSS transition无法实现React轮播图左右平滑滑动问题求助

• 核心问题：你仅渲染当前匹配activeSlide的滑块，非激活滑块不会插入DOM结构。CSS transition仅能作用于已存在DOM元素的属性变化，元素的挂载/卸载过程无法触发过渡效果。
• 类名逻辑无效：由于仅当index === activeSlide时才渲染滑块元素，因此渲染出的元素永远只会匹配slide-active类，slide类对应的偏移样式不会作用到任何元素上，没有初始状态到激活状态的属性变化，自然无法触发过渡。
• 布局不符合滑动要求：.box容器未设置横向排列规则，即使渲染所有滑块也会纵向堆叠，无法实现左右平移的视觉效果。
• 不规范写法：根节点wrapper使用了原生class属性，React规范中应使用className绑定样式类。

1. 修改CSS样式 #

h1,
p {
  font-family: Lato;
}

.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  /* 父容器裁剪超出的滑块内容 */
  overflow: hidden;
}
.box {
  width: 100%;
  /* 所有滑块横向排列，不换行 */
  display: flex;
  flex-wrap: nowrap;
}

button {
  height: 40px;
  flex-shrink: 0;
}
.slide {
  /* 每个滑块占满容器宽度，不收缩 */
  width: 100%;
  flex-shrink: 0;
  padding: 20px;
  box-sizing: border-box;
}

2. 修改Carousel组件逻辑 #

import React from 'react';
import '../style.css';
export function Carousel({ children, activeSlide, setActiveSlide }) {
  const slides = React.Children.toArray(children);
  const totalSlides = slides.length;

  const nextSlide = () => {
    setActiveSlide(prev => prev === totalSlides - 1 ? 0 : prev + 1);
  };
  const prevSlide = () => {
    setActiveSlide(prev => prev === 0 ? totalSlides - 1 : prev - 1);
  };

  return (
    <div className="wrapper">
      <button onClick={prevSlide}>Prev</button>
      {/* 外层裁剪容器 */}
      <div style={{ overflow: 'hidden', width: '100%' }}>
        {/* 滑动容器，通过位移实现平滑过渡 */}
        <div 
          className="box"
          style={{
            transform: `translateX(-${activeSlide * 100}%)`,
            transition: 'transform 0.43s ease-in'
          }}
        >
          {React.Children.map(
            children,
            (slide, index) => (
              <div className="slide" key={index}>
                {slide}
              </div>
            )
          )}
        </div>
      </div>
      <button onClick={nextSlide}>Next</button>
    </div>
  );
}

调整后通过整体移动滑块容器的方式实现滑动，所有滑块始终保留在DOM中，位移属性变化时会自动触发transition过渡效果。

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