1

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;
}
Codebucks
  • 27
  • 6

1 Answers1

0

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.

buzatto
  • 9,704
  • 5
  • 24
  • 33
  • The classNames in react-transition-group correspond to their prefix in the .css file, however we cannot use -(hyphen) in the .jsx file for referring to .css classnames. – Codebucks Jul 19 '20 at 02:19
  • indeed forgot about it. I updated my answer. you would need to use brackets for that case, or change you css classNames for camelCase. – buzatto Jul 19 '20 at 04:50
  • i had tested both options in a [sandbox](https://codesandbox.io/s/transiction-css-module-mi767?file=/src/App.js), and both options work. hope it helps you out. – buzatto Jul 19 '20 at 05:18
  • well, code is now syntactically correct, but no transitions yet. – Codebucks Jul 19 '20 at 07:04
  • added aditional info to the post, I believe it solves the remaining issue. regards – buzatto Jul 20 '20 at 00:27