ReactJS: Fade in div and fade out div based on state

Question

So, I am trying to fade in and fade out a set of inputs based on what button the user clicks. I tried using jQuery, but, the div was fading in and fading out at the same spe

Answer 1

Just use a conditional class and CSS.

Have a state variable like visible.

this.state = {
   visible:false
}

And for the other inputs do something like

So depending upon the state.visible the input will have a class of either fadeIn or fadeOut.

And then just use simple CSS

.fadeOut{
     opacity:0;
     width:0;
     height:0;
     transition: width 0.5s 0.5s, height 0.5s 0.5s, opacity 0.5s;

}
.fadeIn{
     opacity:1;
     width:100px;
     height:100px;
     transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;

}

So every time the state.visible changes the class changes and the transition takes place. The transition property in CSS is basically all the transitions separated by commas. Within the transition the first argument is the property to be modified (say height, width etc), second is transition-duration that is the time taken for the transition and third(optional) is transition-delay ie how much time after the transition has been initiated does the transition for the particular property take place. So when this.state.visible becomes true the .fadeIn class is attached to the object. The transition has height and width taking 0.5s each so that will take 0.5s to grow and after it is finished the opacity transition (which has a delay of 0.5s) will trigger and take a further 0.5s to get opacity 1. For the hiding it's the reverse.

Remember to have the OnClick event on the button handle the changing of this.state.visible.