我正在构建一个自动幻灯片,每 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 秒更改一次事件图像。那么,如何让旧图像在新图像开始褪色时消失,这样它就不会改变我的页面呢? 谢谢
最佳答案
通过将 transitionLeave
属性设置为 false
来删除退出动画,并完全删除 transitionLeaveTimeout
属性。您已将 ReactCSSTransitionGroup
配置为在 enter
和 leave
时使用 500 毫秒计时器制作动画。
在我看来,如果退出的 Slide
淡出,而输入的 Slide
淡入,过渡效果会更好。要实现这种效果,您需要同时使用 通过绝对定位将
元素滑动到彼此之上。这是一个例子:http://codepen.io/yeahjohnnn/pen/rrobvR
关于animation - react 动画: doubled element on state change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40189437/