我每3秒钟更改一个div的className(使用setInterval进行状态更改),每个className拥有不同的background-image。
我想在背景图片更改时使用transition css淡入淡出。我看到了一些更简单情况的示例,但我有超过两个元素需要更改/并且随着状态更改而更改图片。
我该如何做?
我已经上传了我的代码:https://stackblitz.com/edit/react-ubxffz,但我无法在此页面上上传图像,因此暂时将其替换为背景颜色。
这是Image Slide组件。
这是一个App组件,它调用了ImageSlide组件。
我想在背景图片更改时使用transition css淡入淡出。我看到了一些更简单情况的示例,但我有超过两个元素需要更改/并且随着状态更改而更改图片。
我该如何做?
我已经上传了我的代码:https://stackblitz.com/edit/react-ubxffz,但我无法在此页面上上传图像,因此暂时将其替换为背景颜色。
这是Image Slide组件。
const imgUrls = [
1,2,3
];
class ImageSlide extends Component {
render() {
const { url } = this.props;
const Text=...
return (
<div>
<div className={`pic${url}`}>
<p className="p1_1">{Text.p1_1}</p>
</div>
</div>
);
}
这是一个App组件,它调用了ImageSlide组件。
class App extends Component {
constructor (props) {
super(props);
currentImageIndex: 0,
};
}
// ...
componentDidMount() {
this.interval = setInterval(() => {
this.nextSlide(); //this function change the index state.
}, 3000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
// ...
<ImageSlide url={imgUrls[this.state.currentImageIndex]} />
这是针对每个类的CSS样式,用于设置背景图片。
.pic1 {
background-image: url('images/img_01.png');
}
.pic2 {
background-image: url('images/img_02.png');
}
.pic3 {
background-image: url('images/img_03.png');
}