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

问题描述

我正在尝试使用 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;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）