CSSTransition not showing transitions in React - reactjs

Question

Here's my slideshow.jsx file.I am trying to apply transition to a sample div containing Sample Text,but no transitions happening.
import React, { Component } from 'react';<br>
import styles from '../stylesheets/style.module.css';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
class SlideShow extends Component {
state = {
backgroundColor: 'white',
changePic: true,
slideIndex: 1,
};
render() {
console.log(this.state.changePic);
return (
<div className={styles.slideshowContainer}>
<CSSTransition
in={this.state.changePic}
timeout={2000}
classNames={styles.slidePics}
mountOnEnter={true}
>
<div>
<p>sample text</p>
</div>
</CSSTransition>
</div>
);
}
}
export default SlideShow;
Here is my style.module.css file.Following properties associated with slidePics are below.But these transitions are not working:-
.slidePics-enter {
opacity: 0;
}
.slidePics-enter-active {
opacity: 1;
transition: opacity 2000ms;
}

Answer 1

the issue is you dont have a class slidePics at your css modules to be mapped to styles. if you add an empty rule .slidePics { } solves the issue.
other viable approach, you could map your transictions as:
classNames={{
enter: styles['slidePics-enter'],
enterActive: styles['slidePics-enter-active'],
}}
update
you already have in prop as true, given initial state. in initial state needs to be false and then with some iteraction you would change to true with the classes enter enter-active.
by your code, you would like to perform transition on mount state but as the docs says css transition wont perform enter transition by default on first mount.
for that to happen, you need to pass appear={true} and in={true}. likewise create the classes .slidePics-appear .slidePics-appear-active like you have for enter classes.