How to make transition CSS rule on img src change - css

Question

I'm making my React app and I made an image carousel using setInterval which changes img src every 2 seconds.
Now I'd like to animate the change of img using transition. (CSSTransitionGroup is unclear to me).
However I have a problem with attaching transition to any measureable element. Can I somehow "grab" the setInterval source-changing event using css?
So far, I've tried adding "opacity: 1" style to images set to opacity: 0, but the opacity: 1 stays beyonod every iteration of interval, thus only the first image gets transition and the new ones have a "opacity:1" styling by default.
I'm talking about the " NavLink to ="/about_us"> " section
Here's my code. Any ideas? I've wasted 5hours on this:
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;

Answer 1

Ok, I used the crossfade functionality to get the issue done. I used map to render all img srcs from an array and then used animation to generate the image shift.
I think I'll incorporate some sort of sass loop to simplify the scss once I do some refactor although a little tip would be nice
<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
}
}