How to transition an element that does not exist on the DOM yet

Now I have code like this

  {data.inventoryOn === true ? (
      <div className="inventoryOptions flex__container-v">
        <Link to="listofmedicines" style={{ textDecoration: "none" }}>
          <div className="inventoryoption">
            <p className="p__poppins">List Of Medicines</p>
          </div>
        </Link>
        <Link to="medicinegroups" style={{ textDecoration: "none" }}>
          <div className="inventoryoption">
            <p className="p__poppins">Medicines Groups</p>
          </div>
        </Link>
      </div>
    ) : null}
    {data.spaceBelow ? <div className="space" /> : null}

as you might have noticed for the code to appear it depends on some state value to be true.

My question is how do I get it to appear smoother. I cant transition it because I don’t know the property like background or color or something else. And the content is not hidden for me to transition using opacity since it is completely not available when the state value is not true.

how can I achieve this?

Answer

If you insist to use conditional rendering , you can use css animation and onAnimationEnd prop according to react, there is an implementation in this snippet

Advertisement

Answer