Inconsistent jumping inside flex item

[SpasiboKojima]

Basically I'm trying to add an error message under input, input is inside div which gets parent ref from auto-animate, and the div is inside flex container with 2 other elements. Both the message and the input are jumping inconsistently during animation.

Removing flex property from container solves it, as well as removing 2 other flex items.

I saw the tips about flexbox layouts, but the box expands nicely, so not sure if this is the case? If it is, how can I specify explicitly height, if I really need the box to grow in size?

input.mp4

Basically my component, Tailwind + DaisyUI

const Register = () => {
  const [pass, setPass] = useState('');
  const [isError, setIsError] = useState(false);
  const [parent] = useAutoAnimate({ duration: 1000 });

  return (
    <div className="flex min-h-screen flex-col items-center justify-between bg-slate-500 p-24">
      <div className="text-lg/loose text-primary">WHERE</div>
      <h1 className="text-5xl/relaxed text-blue-dark-700">Get Started</h1>
      <div className="rounded-2xl bg-white p-8">
        <div className="form-control w-[300px] gap-5 pt-8">
          <div ref={parent}>
            <input
              type="password"
              placeholder="Password"
              className={`input input-bordered w-full max-w-xs ${isError && 'input-error'}`}
              onChange={(e) => setPass(e.target.value)}
              value={pass}
            />
            {isError && <div className="text-error">Your password is not strong enough. Your password must be at least 10 characters</div>}
          </div>
          <button
            className="btn btn-primary w-full text-white"
            onClick={() => {
              if (pass.length < 10) {
                setIsError(true);
              } else {
                setIsError(false);
              }
            }}
          >
            Register
          </button>
        </div>
      </div>
    </div>
  );
};

[Thoronir42]

I feel like I have same issue - flexbox and the items sometimes jump around.

Initially I've bumped into this when I was manually using el.append() and el.remove() so I went to create a svelte experiment to see if I was doing something wrong and ended up with minimal repro here: https://github.com/Thoronir42/autoanimate-jerk

[SlavenIvanov]

I am still experiencing this. Has anyone found a work-around?

[justin-schroeder]

Unfortunately flexbox requires 2 paints at the browser level if the size of the item transitioning in is unknown — the only good workaround to this is to have predefined sizes on the animating axis.