我有一個css屬性轉換設置為高度3s。然而，它不起作用。我在react.js上

當我試著去做的時候，在高度上沒有過渡。

代碼的簡短部分。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;
}

這是RegisterForm返回的內容:

<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返回:

<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>

這是登記表。項目以一定的寬度居中。高度是固定的，我想它的動畫。然而，由于某種原因，它不是css上帶有過渡屬性的動畫。 我現在該如何解決這個問題？我想不通。

CSS在用auto(https://developer . Mozilla . org/en-US/docs/Web/CSS/CSS _ animated _ properties)設置height屬性時不能直接動畫顯示。 您可以嘗試使用scrollHeight屬性通過JavaScript設置高度，或者嘗試這里已經討論過的眾多解決方案之一。