ReactTransitionGroup 动画未在状态更改时播放

Question

我正在尝试使用 React 和 ReactTransitionGroup 创建一个自动图像滑块，但我无法让动画工作。图像会改变，但不会播放过渡效果。我假设它是 CSS，因为确实添加/删除了类名。

组件

const ImgSlideshow = (props) => {

  const images = [
    'https://images.unsplash.com/photo-1593642634315-48f5414c3ad9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
    'https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80',
    'https://images.unsplash.com/photo-1593642532781-03e79bf5bec2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80',
    'https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=925&q=80',
    'https://images.unsplash.com/photo-1593642634524-b40b5baae6bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80'
  ]

  const [slide, setSlide] = useState(0);


  useEffect(() => {
    const slideshowTimer = setInterval(() => {
      ((slide + 1) > images.length - 1) ? setSlide(0) : setSlide(slide + 1)
    }, 3000)

    return () => clearInterval(slideshowTimer)

  })
  
  return (
    <div className={styles.slideshow}>
      <SwitchTransition>
        <CSSTransition key={slide} timeout={200} classNames='slideshowImg'>
          <img src={images[slide]} className="slideshowImg"></img>
        </CSSTransition>
      </SwitchTransition>
      {props.children}
    </div>
  )
}

CSS

.slideshowImg-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.slideshowImg-enter-active {
  opacity: 1;
  transform: translateX(0%);
}
.slideshowImg-exit {
  opacity: 1;
  transform: translateX(0%);
}
.slideshowImg-exit-active {
  opacity: 0;
  transform: translateX(100%);
}
.slideshowImg-enter-active,
.slideshowImg-exit-active {
  transition: opacity 500ms, transform 500ms;
}

Answer 1

我发现了几个问题。

1. 您无需在正在转换的子元素上指定 classNames 属性中的 className。如果您有附加到此类的样式，那么我建议您将其更改为其他内容以避免混淆，但我认为这不会影响您的转换。

2. 您将转换设置为 500 毫秒，但只允许转换组 200 毫秒完成转换。

3. 看起来您只是在更改图像源，而不是每次都使用新元素。

我有一个工作代码沙箱here

我认为你可以通过这个重构达到预期的结果：

const ImgSlideshow = (props) => {
  const images = [
    "https://images.unsplash.com/photo-1593642634315-48f5414c3ad9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
    "https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80",
    "https://images.unsplash.com/photo-1593642532781-03e79bf5bec2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=634&q=80",
    "https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=925&q=80",
    "https://images.unsplash.com/photo-1593642634524-b40b5baae6bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1189&q=80"
  ];

  const [slide, setSlide] = useState(0);

  const imageElements = images.map((img, i) => {
    return <img src={img} key={i} alt={`slideshow ${i+1}`} />;
  });

  useEffect(() => {
    const slideshowTimer = setInterval(() => {
      slide + 1 > images.length - 1 ? setSlide(0) : setSlide(slide + 1);
    }, 3000);

    return () => clearInterval(slideshowTimer);
  });

  return (
    <div>
      <SwitchTransition>
        <CSSTransition key={slide} timeout={500} classNames="slideshowImg">
          {imageElements[slide]}
        </CSSTransition>
      </SwitchTransition>
      {props.children}
    </div>
  );
};

我的 sn-p 使用 map 函数创建一个 img 元素数组，每个元素都有一个 src 对应于 images 数组的索引。这样，您将有多个元素在两者之间进行过渡。现在你只有一个图像元素，react-transition-group 不能为图像的变化添加动画src (afaik)。