我正在构建一个每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秒更改一次活动图像。那么,当新的图像开始淡化它以便它不会改变我的页面时,如何使旧图像消失? 谢谢
答案 0 :(得分:5)
通过将transitionLeave
属性设置为false
来删除退出动画,并完全删除transitionLeaveTimeout
属性。您已将ReactCSSTransitionGroup
配置为使用500毫秒计时器在enter
和leave
上设置动画。
在我看来,如果退出的Slide
在输入Slide
淡入时淡出,则转换会更好。为此,您需要两个Slide
元素都处于打开状态通过绝对定位,彼此顶部。以下是此示例:http://codepen.io/yeahjohnnn/pen/rrobvR