Help with ReactCSSTransitionGroup

JavaScript
1

I am trying to make the text fade in/out when the user clicks, using ReactCSSTransitionGroup. The texts are stored in an array. Please let me know if you can help!

<style>
/*Fade-in/out... not working yet*/
.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: 500ms ease-in all;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: 300ms ease-in all;
}
</style>

<script>
  //Set the state with a new text, based on index
  handleClick = (i) => {
        this.setState({ clickedText: texts[i] });
  };
 

render(){
   const { clickedText } = this.state;
return(
<ul>
          {clickedText.map((t, i) => (
            <div> 
              {/* Heading */}
              <li id = "name" className = "body"><h1>Jennifer Grace</h1></li>
              <li className = "body"><h2>Front-End Developer</h2></li>

              {/* Fade-in text... not working yet */}
              <ReactCSSTransitionGroup
                   transitionName="fade"
                   transitionLeaveTimeout={300}
                   transitionEnterTimeout={500}>
                {/* Text to fade in/out */}
              <li className = "body" key={`text-${i}`}>{t}</li> 
              </ReactCSSTransitionGroup>
           
              </div>
          ))}
       </ul>
)
}
</script>

Project is here, if that’s easier to view: https://codepen.io/jennnico/pen/boOwJW?editors=0110

Thanks!

2

I have tried to use it, too. but I think it is too much trouble. Furthermore, you will have a hard time integrating it in Codepen. Best way, in my mind, is to useClassNames, which practically allows you to duplicate addClass and removeClass from jQuery. This means that you can have your element styled with class

.beforeFading{
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: opacity 2s; /* For Safari 3.1 to 6.0 */
    transition: opacity 2s;
}

and then, when you want your fading to start, add the following class

.startFading{
  opacity: 0.1;
}

Adding them together produces the fading effect. Still, classNames is difficult to integrate in Codepen (if you can do it, let me know).

3

Thank you for the feedback! I thought it was just me.