Tailwind CSS transition on load

Question

I am trying to add an opacity transition on a div. It should start at opacity 0 and once it is visible on the screen it should fade in slowly, to the maximum opacity.

Here is my code:

<div className="transition-opacity ease-in-out opacity-0 <STATE>:opacity-100 duration-300"> ... </div>

However, I do not know what state to use for my purpose. What should I replace the STATE from above with? Or is it not the right approach?

Answer 1

Think you are on the right track with this, you'd just need to toggle a class upon load:

const [loaded, setLoaded] = useState(false);

handleLoad = () => {
  setLoaded(true);
}

componentDidMount() {
  window.addEventListener('load', this.handleLoad);
}

<div className={`${loaded ? "opacity-100" : "opacity-0"}`>

If there's a more elegant solution to this from a React expert, would be good to know:)