Within this presentational component:
const HowToControls = props => {
return (
<div className="col-md-6 how-to">
{props.isOpen ?
<p className={`text ${props.isOpen ? 'visible' : ''}`}>
lorem ipsum............
</p>/>
: null}
</div>
);
}
The paragraph holds a class named "text" and another class is dynamically added depending on an action in its parent component. Despite both classes ("text" and "visible") being applied to the element, there seems to be no transition effect when toggling. Below is my CSS:
.text {
opacity: 0.01;
transition: opacity 600ms;
}
.text.visible {
opacity: 1;
}
It appears that both classes are applied upon page load (prior to full component mounting). Is this assumption correct? Your input is greatly appreciated.