I am encountering a scenario where I have a react component with a specific part that is rendered conditionally. Upon clicking on a visible element within the component (button), the state changes triggering the display of the hidden parts. However, instead of simply showing the hidden part instantly, I would like it to fade in gradually. Is there a way to achieve this using only CSS without relying on external libraries like CSSTransitionGroup? Your assistance is greatly appreciated.
import React, { Component } from "react";
export default class Parent extends Component {
state = {
showForm: false
};
render() {
const { showForm } = this.state;
return (
<div>
<button onClick={() => this.setState({ showForm: true })}>
Fade in form on click
</button>
{showForm && (
<div>
<h2>
This section should fade in once **showForm** becomes true
</h2>
<form></form>
</div>
)}
</div>
);
}
}