I'm trying to add a feature to my Carousel where the opacity changes between images. When clicking on the icons, the images should transition smoothly. I've been using React Transition Group, but for some reason, it's not working as expected. Can anyone help me figure out what I'm missing in my RTG Component implementation for building this carousel? Any assistance would be greatly appreciated. Here's a snippet of my code:
// == APP COMPONENT
import React, { Component } from 'react';
import './css/app.css';
import HeroImg from './HeroImg';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class App extends Component {
state = {
imgID: 1,
activeImgID: 1,
}
carouselSwitch = (e) => {
this.setState({imgID: e.target.getAttribute('id') - 1,
activeImgID: e.target.getAttribute('id') - 1});
}
render() {
return (
<div className="container">
<div className="heroImg-container">
<ReactCSSTransitionGroup
transitionName="fade"
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}>
<HeroImg index={this.state.imgID} />
</ReactCSSTransitionGroup>
<div className="carousel-btns-wrapper">
<div className="carousel-btns">
<i id={1} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 0 ? 'right active' : 'up' }`} />
<i id={2} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 1 ? 'right active' : 'up' }`} />
<i id={3} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 2 ? 'right active' : 'up' }`} />
<i id={4} onClick={this.carouselSwitch} className={`fas fa-caret-${this.state.activeImgID === 3 ? 'right active' : 'up' }`} />
</div>
</div>{/* END CAROUSEL-BTNS-WRAPPER */}
</div> {/* END HEROIMG-CONTAINER */}
</div> /* END CONTAINER */
);
}
}
export default App;
// == HEROIMG Component
import React, { Component } from 'react';
import Stage1 from './images/carousel/stage1.jpg';
import Stage2 from './images/carousel/stage2.jpg';
import Stage3 from './images/carousel/stage3.jpg';
import Stage4 from './images/carousel/stage4.jpg';
class HeroImg extends Component {
render() {
const srcs = [Stage1, Stage2, Stage3, Stage4];
let src = srcs[this.props.index];
return <img className="fade" src={src} alt='Military Images Carousel' />;
}
}
export default HeroImg;
// == CSS
.fade-enter {
opacity: 0.01;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fade-leave {
opacity: 1;
}
.fade-leave.fade-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}