反应动画：状态变化的双倍元素答案

【问题标题】：React animation: doubled element on state change反应动画：状态变化的双倍元素
【发布时间】：2016-10-22 07:19:53
【问题描述】：

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

这是我用来显示图片的 Slide 组件：

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;

这是我称之为 Slide 组件的父组件的一部分

  <ReactCSSTransitionGroup {...transitionOptions}>
    <Slide key={this.props.active} picture={this.props.active}/>
  </ReactCSSTransitionGroup>

这是在parent的render()方法中设置transition的选项

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

这就是风格

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

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

【问题讨论】：

那个键可能有问题。那里为什么需要钥匙？
如果没有密钥，我编写的代码中不会有任何动画。我认为 react 正在寻找一些独特的东西来知道它正在为哪个元素设置动画。如果你有 2 个确切的元素，我在某处看过一个视频，它可能会为错误的元素设置动画

标签： animation reactjs reactcsstransitiongroup

【解决方案1】：

通过将transitionLeave 属性设置为false 来删除退出动画，并完全删除transitionLeaveTimeout 属性。您已将 ReactCSSTransitionGroup 配置为使用 500 毫秒计时器在 enter 和 leave 上设置动画。

在我看来，如果退出的Slide 淡出而进入的Slide 淡入，则过渡效果会更好。要达到这种效果，您需要两个Slide 元素相互叠加，通过绝对定位。这是一个例子：http://codepen.io/yeahjohnnn/pen/rrobvR

【讨论】：

这行得通！谢谢你。但是有一段时间屏幕在闪烁，如何使其平滑？
你能分享你的代码吗？闪烁可能是由多种原因引起的。我怀疑在下一张图像开始淡入时，可能会感觉到图像的闪烁立即消失。看看这个例子，我让幻灯片在退出时淡出并在入口处淡入，没有闪烁：codepen.io/yeahjohnnn/pen/rrobvR。或者，如果您使用的是图像，则闪烁可能是由于图像加载引起的，但我对此表示怀疑（如果是这种情况，您可以预加载图像并缓存它们）。
我发现了闪烁的问题。因此，当它切换图像时，图像仍在加载，所以有几分之一秒没有显示任何内容。这使得 div 我的图像崩溃了。我所做的是，我将父 div 设置为我想要的宽度和高度，而不是包含图像的子 div。因此，当它仍在加载时，空 div 的一侧是相同的，它会阻止页面调整大小。并感谢您在代码笔中的示例。我将尝试使用它作为指导，让我的淡入淡出，而不是仅仅淡入。