反应动画:状态变化时加倍元素

Question

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

这是我的幻灯片组件来显示图像:

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>

这是在父级的render()方法中设置转换选项

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秒更改一次活动图像.那么,当新的图像开始淡化它以便它不会改变我的页面时,如何使旧图像消失？谢谢

Answer 1

通过将transitionLeave属性设置为删除退出动画false,并transitionLeaveTimeout完全删除该属性.你已经配置ReactCSSTransitionGroup动画上enter,并leave用500ms的计时器.

在我看来,如果在Slide进入Slide淡入时退出会逐渐消失,那么转换会更好.对于这种效果,你需要Slide通过绝对定位将两个元素放在一起.这是一个例子:http://codepen.io/yeahjohnnn/pen/rrobvR