I am facing an issue with a CSS property transition that is set to height 3s, but it's not working as expected. The context is within a React.js application.
Despite my attempts, there is no smooth transition effect on the height when triggered.
Here is a snippet of the JSX code:
function Form({showPopup}){
const [height, setHeight] = useState("400px")
function proceedWithOtp(message){
setHeight("300px")
setForm(<OtpForm message={message}/>)
}
const [form, setForm] = useState(<RegisterForm showPopup={showPopup} proceedWithOtp={proceedWithOtp}/>)
return (
// This system is used so that height animation can work
<div className="register-form" style={{
height: height
}}>
{form}
</div>
)
}
CSS Styles:
.Register .register-form form {
width: 350px;
padding: 25px;
border-radius: 25px;
}
.Register .register-form {
display: flex;
justify-content: center;
align-items: center;
transition: height 5s;
}
.Register .register-form form * {
padding: 5px;
}
The RegisterForm component returns the following form structure:
<form onSubmit={handleSubmit} className="bg-white text-dark email-form">
<h1 className="text-center font-hagrid">Register</h1>
<br />
<div className="mb-3">
...
...
...
The OtpForm component returns:
<form className="bg-white text-dark otp-form" >
<p className="text-center">{message}</p>
...
...
...
<button disabled={false} type="submit" className="btn btn-primary btn-submit text-dark">{"Submit"}</button>
</form>
This register form should have a fixed height with animated transitions applied through CSS, however, the animations are not functioning correctly. I'm looking for suggestions on how to troubleshoot and resolve this issue.