英文:
Transitions isn't working in css React.js
问题
I have a css property transition set to height 3s. However, it isn't working. I'm on react.js
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><div className="mb-3"><input placeholder="Enter your password" required value={password} onChange={e => setPassword(e.target.value)} type="password" className="form-control" /></div><ReCAPTCHAsitekey={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, it's not animating with the transition property in CSS. How do I fix this now? I'm unable to figure it out.
英文:
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><ReCAPTCHAsitekey={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.
答案1
得分: 1
CSS 无法直接动画化以 auto 设置的高度属性（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties）。
你可以尝试通过 JavaScript 使用 scrollHeight 属性 设置高度，或尝试已经在 这里 讨论过的众多解决方案。
英文:
CSS can't directly animate the height property when it is set with auto (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties).
One thing you could try is setting the height via JavaScript using the scrollHeight property, or try one of the numerous solutions already discussed here.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论