Animation 反应动画：状态更改时元素加倍

我正在制作一个自动幻灯片，每5秒切换一次图像。当新图像出现时，我使用ReactCSStransitongGroup创建淡入方法。问题是，当新图像淡入时，旧图像仍然存在，并且两个图像都显示在屏幕上，在新图像完全显示之前，旧图像不会离开。我该如何解决这个问题

这是用于显示图像的幻灯片组件：

import React from 'react';    
const Slide = ({picture}) => {
  if(!picture){
    return <div>Loading...</div>;
  }    
  return (
      <div className='row'>
        <img src={picture.url} alt={picture.title} />
      </div>
  );
};    
export default Slide;

这就是风格

.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  opacity: 1;
  transition: 0.5s ease-in all;
}

基本上在父组件中，我有一个setInterval方法，每5秒更改一次活动映像。那么，当新图像开始褪色时，我如何使旧图像消失，这样它就不会改变我的页面？

---

谢谢

通过将

transitionLeave

属性设置为

false

来删除退出动画，并完全删除

transitionLeaveTimeout

属性。您已将

reactcstransitiongroup

配置为使用500毫秒计时器在

enter

和

leave

上设置动画

---

在我看来，如果退出的

幻灯片

淡出，而进入的

幻灯片

淡入，过渡会更好。为此，您需要通过绝对定位将两个

幻灯片

元素置于彼此之上。下面是一个例子：

该键可能是个问题。为什么需要一个关键点呢？没有关键点，我写的代码中就不会有任何动画。我认为react是在寻找一些独特的东西，以知道它正在制作哪个元素的动画。我在某处看过一个视频，如果你有两个确切的元素，它可能会使错误的元素产生动画效果！非常感谢。但有时屏幕会闪烁，我该如何使它平滑？你能分享你的代码吗？闪烁的原因可能有很多。我怀疑当下一张图像开始淡入时，图像中的闪烁可能会立即消失。看看这个例子，我让幻灯片在出口处淡出，在入口处淡入，没有闪烁：。或者，如果您使用的是图像，闪烁可能是由于图像加载，但我怀疑（如果是这种情况，您可以预加载图像并缓存它们）。我发现了闪烁的问题。因此，当它切换图像时，图像仍在加载，因此只有几分之一秒的时间没有显示任何内容。这使得div I的图像处于崩溃状态。我所做的是，我用我想要的宽度和高度设置父div，而不是包含图像的子div。因此，当它仍在加载时，空div的一侧是相同的，它阻止了页面的大小调整。谢谢你在代码笔里的例子。我会尝试使用它作为指导，使我的淡入淡出，而不是仅仅在里面。

const transitionOptions = {
  transitionName: "fade",
  transitionEnterTimeout: 500,
  transitionLeaveTimeout: 500
}

.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  opacity: 1;
  transition: 0.5s ease-in all;
}