I am looking to implement a simple transition/animation using React and CSS. The concept is to have an image that, when clicked, toggles a new section below with a nice transition effect.
This is my React code:
const [show, setShow] = useState(false);
<div className="box" id="box" onClick={() => setShow(!show)}>
<img src="myImage" />
</div>
Here's the section that toggles:
{show && (
<div className="transform popup">This text will show!</div>
)}
The toggle functionality works perfectly fine, but the animation does not.
Below is the CSS for the animation:
.popup {
height: 0px;
width: 0px;
}
.transform {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.transform-active {
background-color: #45cee0;
height: 200px;
width: 200px;
}
In jQuery, I would typically use something like this:
$("#box").click(function() {
$('.transform').toggleClass('transform-active');
});
How can I adapt this into React-friendly code?