1

Hi I have been going throw this code for more than 4 hours now and still can't get it to work
It cant be that hard to get a simple code like this to work
By default sign in component should be hidden and on events it should appear Yet It is visible no matter what this.state.SignInPage value I even tried entering it manually nothing works So my main problems are the in and the classNames attributes not working

<CSSTransition
 in={this.state.SignInPage}
 timeout={1500}
 classNames="signinpage"           
>
  <SignInPage />
</CSSTransition>

By the start state by default is false yet no matter what i do it is always visible
In the console the className of the main div doesn't change either by the time
I am using

"react-transition-group": "^4.4.1",
"@types/react-transition-group": "^4.4.0"

Please need your help

Edit I just noticed that many of the examples I saw the conditionally rendered components was functions based not classes ,, my component is class does this make any deference ?
Edit 2 Problem solved by uninstalling everything then reinstalling and used the same code
After a long day I wasn't the problem It now works

1 Answers1

1

You need to add an appropriate CSS style to coordinate with your component.

So, its good to have a class for multiple stages of your transitions like

  • signinpage-enter
  • signinpage-enter-active
  • signinpage-exit
  • signinpage-exit-active

CSSTransition internally hook with this CSS class which does all these magic

.signinpage-enter {
  opacity: 0.01;
}

.signinpage-enter-active {
  opacity: 1;
  transition: all 1s;
}

.signinpage-exit {
  opacity: 1;
}

.signinpage-exit-active {
  opacity: 0.01;
  transition: all 1s;
}

You can also refer Working Example of React transition

Abhin Pai
  • 332
  • 3
  • 10