This code is located inside my component file
<CSSTransition
classNames="method"
in={radio === 'add-card'}
exit={radio !== 'add-card'}
timeout={500}
unmountOnExit>
<div className=" ">
Hello
</div>
</CSSTransition>
This style belongs to my CSS file
.method-enter {
opacity: 0;
transition: opacity 500ms ease-in;
}
.method-enter-active {
opacity: 1;
}
.method-exit {
opacity: 1;
transition: opacity 500ms ease-out;
}
.method-exit-active {
opacity: 0;
}
The CSSTransition should initially be inactive. However, when the condition is set to true, there is no fade-in animation as expected and it appears instantly. Setting the condition to false causes the transition to disappear after 500ms instead of fading out.
I suspect there might be an issue with my CSS. My intention is to have a smooth 500ms fade-in and fade-out effect for both enter and exit transitions. Can anyone point me in the right direction?