I have a css property transition set to height 3s. However, it isn't working. I m on react.js
When I try to do it, there is no transition on height.
Short part of code. Jsx:
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:
.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;
}
This is what RegisterForm returns:
<form onSubmit={handleSubmit} className="bg-white text-dark email-form">
<h1 className="text-center font-hagrid">Register</h1>
<br />
<div className="mb-3">
<input type="text" value={name} onChange={e => setName(e.target.value)} required placeholder="Enter your Name" className="form-control" />
</div>
<div className="mb-3">
<input type="email"value={email} onChange={e => setEmail(e.target.value)} required placeholder="Enter your email address" className="form-control" />
{/* <div id="emailHelp" className="form-text">Your passwords are 100% secure and encrypted with us!</div> */}
</div>
<div className="mb-3">
<input placeholder="Enter your password" required value={password} onChange={e => setPassword(e.target.value)}type="password" className="form-control" />
</div>
<ReCAPTCHA
sitekey={RECAPTCHA_SITE_KEY}
size="invisible"
ref={recaptchaRef}
/>
<button disabled={buttonDisabled} type="submit" className="btn btn-primary btn-submit text-dark">{buttonContent}</button>
</form>
OtpForm returns:
<form className="bg-white text-dark otp-form" >
<p className="text-center">{message}</p>
<div className="input_field_box mb-3">
<input ref={ref1} name="1" onChange={otpBoxChange} type="number" />
<input ref={ref2} name="2" onChange={otpBoxChange} type="number" disabled />
<input ref={ref3} name="3" onChange={otpBoxChange} type="number" disabled />
<input ref={ref4} name="4" onChange={otpBoxChange} type="number" disabled />
</div>
<button disabled={false} type="submit" className="btn btn-primary btn-submit text-dark">{"Submit"}</button>
</form>
This is a form for register. The items are centered with a definite width. The height is fixed and I want it to animate. However, for some reason, its not animation with the transition property on css. How do I fix this now? I'm unable to figure it out.
