我正在制作我的React应用程序，我使用setInterval制作了一个图像轮播，每2秒更改一次img src。
现在，我想使用transition为img的更改添加动画效果。 （CSSTransitionGroup对我不清楚）。
但是，我对将转换附加到任何可测量元素有问题。我可以使用CSS以某种方式“抓住” setInterval源更改事件吗？
到目前为止，我已经尝试过将“ opacity：1”样式添加到设置为opacity：0的图像中，但是opacity：1在间隔的每次迭代中都保持不变，因此只有第一个图像得到过渡，而新图像具有一个默认情况下为“ opacity：1”样式。
我说的是“ NavLink =“ / about_us”>”部分
这是我的代码。有任何想法吗？我在此上浪费了5个小时：
import React, {
Component
} from 'react';
import {
NavLink
} from "react-router-dom";
class Radzikowskiego_S2_Staff extends Component {
constructor(props) {
super(props);
this.state = {
spanText: 'Zabawy',
text: ["Rozwoju", "Odpoczynku", "Śmiechu", "Zabawy"],
staffImg: "Aleksandra_Brozyna",
staff: ["Dominika_Serwa", "Dorota_Szastak", "Joanna_Wozniak", "Alicja_Kwasny", "Kinga_Kaczmarek", "Monika_Garula", "Maria_Kaczmarek", "Natalia_Kiczura", "Violetta_Wojas"],
index: 0,
indexStaff: 0,
}
}
componentDidMount() {
this.changeSpan();
this.changeStaff();
}
changeSpan = () => {
this.interval = setInterval(() => {
this.setState({
spanText: this.state.text[this.state.index],
index: this.state.index >= this.state.text.length - 1 ? 0 : this.state.index + 1
});
}, 2000);
};
changeStaff = () => {
this.interval = setInterval(() => {
this.setState({
staffImg: this.state.staff[this.state.indexStaff],
indexStaff: this.state.indexStaff >= this.state.staff.length - 1 ? 0 : this.state.indexStaff + 1,
});
}, 2000);
};
showImg = () => {
// console.log(event.target.style.opacity='0.5');
// console.log(this.refs.img_src.style.opacity='1')
this.refs.img_src.classList.add('show_images')
};
componentWillUpdate() {
this.showImg();
this.removeImg();
}
removeImg = () => {
// console.log(event.target.style.opacity='0.5');
// console.log(this.refs.img_src.style.opacity='1')
// console.log(this.refs.img_src.classList)
this.refs.img_src.classList.remove('show_images')
};
render() {
return (
<
div id = 'staff' >
<
div className = 'row' >
<
div className = 'col-12 text-center mb-3' >
<
h3 > Krakowiaczek to miejsce do </h3> <
h6 id = "staff_span"
className = "animate_span" > {
this.state.spanText
} < /h6> <
h6 class = "mt-3" > W Przedszkolu Krakowiaczek nie ma czasu na nudę. < /h6>
<
/div> <
/div>
<
div class = 'row align-items-center ' >
<
div className = 'col-md-2 col-md-offset-1 section_2_thumbnail' >
<
NavLink to = "/our_philosophy" >
<
img src = 'images/filozofia.svg'
className = 'section_2_thumbnail_img' / >
<
p class = "pt-2" > Nasza Filozofia < /p> <
/NavLink> <
/div> <
div className = 'col-md-2 col-md-offset-1 section_2_thumbnail' >
<
NavLink to = "/extended_offer" >
<
img src = 'images/what_we_offer.svg'
className = 'section_2_thumbnail_img' / >
<
p className = "pt-2" > Co oferujemy < /p> <
/NavLink> <
/div> <
div className = 'col-md-2 col-md-offset-1 section_2_thumbnail' >
<
NavLink to = "/enrollment" >
<
img src = 'images/zapisy.svg'
className = 'section_2_thumbnail_img' / >
<
p className = "pt-2" > Zapisy < /p> <
/NavLink> <
/div>
<
div className = 'col-md-3 col-md-offset-1 section_2_thumbnail' >
<
NavLink to = "/about_us" >
<
img src = {
`images/teachers/${this.state.staffImg}.jpg`
}
className = 'section_2_thumbnail_staff pb-2'
id = 'staffIcon'
onLoad = {
this.showImg
}
ref = 'img_src' / >
<
p className = "mt-2 mb-3" > Kadra < /p> <
/NavLink> <
/div> <
/div>
<
/div>
)
}
}
export default Radzikowskiego_S2_Staff;
答案 0 :(得分：0)
好的，我使用了淡入淡出功能来解决问题。我使用map来渲染数组中的所有img src，然后使用动画来生成图像偏移。
我想我会进行某种重构，尽管有些提示会很好
，但我将结合某种sass循环来简化scss。 <div class="staff_img_wrapper">
{
this.state.staff.map(element => {
return (
<img src={`images/teachers/${element}.jpg`} className='section_2_thumbnail_staff pb-2' id='staffIcon' />
)
})
}
</div>
CSS
.staff_img_wrapper {
height: 20vh;
img:nth-child(1) {
position: absolute;
opacity: 1;
left: 0;
right: 0;
margin: 0 auto;
animation: fadeOut 3s;
animation-fill-mode: forwards;
z-index:10;
}
img:nth-child(2) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
z-index: 9;
}
img:nth-child(3) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 6s;
animation-fill-mode: forwards;
z-index: 8;
}
img:nth-child(4) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 9s;
animation-fill-mode: forwards;
z-index: 7;
}
img:nth-child(5) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 12s;
animation-fill-mode: forwards;
z-index: 6;
}
img:nth-child(5) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 15s;
animation-fill-mode: forwards;
z-index: 5;
}
img:nth-child(6) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 18s;
animation-fill-mode: forwards;
z-index: 4;
}
img:nth-child(7) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 21s;
animation-fill-mode: forwards;
z-index: 3;
}
img:nth-child(8) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 24s;
animation-fill-mode: forwards;
z-index: 2;
}
img:nth-child(9) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 27s;
animation-fill-mode: forwards;
z-index: 1;
}
img:nth-child(10) {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
opacity: 1;
animation: fadeOut 3s;
animation-delay: 30s;
animation-fill-mode: forwards;
z-index: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0
}
}