Transitions在CSS React.js中不起作用。

huangapple go评论61阅读模式
英文:

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>
      <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, 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(&quot;400px&quot;)
    function proceedWithOtp(message){
      setHeight(&quot;300px&quot;)
      setForm(&lt;OtpForm message={message}/&gt;)
    }
    const [form, setForm] = useState(&lt;RegisterForm showPopup={showPopup} proceedWithOtp={proceedWithOtp}/&gt;)

    return (
      // This system is used so that height animation can work
      &lt;div className=&quot;register-form&quot; style={{
        height: height
      }}&gt;
        {form}
      &lt;/div&gt;
    )
}

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:

        &lt;form onSubmit={handleSubmit}  className=&quot;bg-white text-dark email-form&quot;&gt;
            &lt;h1 className=&quot;text-center font-hagrid&quot;&gt;Register&lt;/h1&gt;
            &lt;br /&gt;
            &lt;div className=&quot;mb-3&quot;&gt;
    &lt;input type=&quot;text&quot; value={name} onChange={e =&gt; setName(e.target.value)} required placeholder=&quot;Enter your Name&quot; className=&quot;form-control&quot;  /&gt;   
  &lt;/div&gt;

  &lt;div className=&quot;mb-3&quot;&gt;
    &lt;input type=&quot;email&quot;value={email} onChange={e =&gt; setEmail(e.target.value)} required placeholder=&quot;Enter your email address&quot; className=&quot;form-control&quot; /&gt;   
    {/* &lt;div id=&quot;emailHelp&quot; className=&quot;form-text&quot;&gt;Your passwords are 100% secure and encrypted with us!&lt;/div&gt; */}
  &lt;/div&gt;
  &lt;div className=&quot;mb-3&quot;&gt;
    &lt;input placeholder=&quot;Enter your password&quot; required value={password} onChange={e =&gt; setPassword(e.target.value)}type=&quot;password&quot; className=&quot;form-control&quot; /&gt;
  &lt;/div&gt;
      &lt;ReCAPTCHA
      sitekey={RECAPTCHA_SITE_KEY}
      size=&quot;invisible&quot;
      ref={recaptchaRef}
      /&gt;
   &lt;button disabled={buttonDisabled} type=&quot;submit&quot;  className=&quot;btn btn-primary btn-submit text-dark&quot;&gt;{buttonContent}&lt;/button&gt;
&lt;/form&gt;

OtpForm returns:

 &lt;form className=&quot;bg-white text-dark otp-form&quot; &gt;
&lt;p className=&quot;text-center&quot;&gt;{message}&lt;/p&gt;
&lt;div className=&quot;input_field_box mb-3&quot;&gt;
&lt;input ref={ref1} name=&quot;1&quot; onChange={otpBoxChange}  type=&quot;number&quot; /&gt;
&lt;input ref={ref2} name=&quot;2&quot; onChange={otpBoxChange}  type=&quot;number&quot; disabled /&gt;
&lt;input ref={ref3} name=&quot;3&quot; onChange={otpBoxChange}  type=&quot;number&quot; disabled /&gt;
&lt;input ref={ref4} name=&quot;4&quot; onChange={otpBoxChange}  type=&quot;number&quot; disabled /&gt;
&lt;/div&gt;
&lt;button disabled={false} type=&quot;submit&quot;  className=&quot;btn btn-primary btn-submit text-dark&quot;&gt;{&quot;Submit&quot;}&lt;/button&gt; 
&lt;/form&gt;

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.

huangapple
  • 本文由 发表于 2023年5月21日 23:02:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/76300537.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定