Transitioning on initial mount

[mehdad-hussain]

If you want an element to transition the very first time it's rendered, set the appear prop to true.

This is useful if you want something to transition in on initial page load, or when its parent is conditionally rendered.

I got it but does it work for when I reload the same page ? I am not sure as it is not working for me when I am reloading the page.

      <button onClick={() => setIsShowing((isShowing) => !isShowing)}>
        Toggle
      </button>
      <Transition
        appear={true}
        show={isShowing}
        enter="transition-opacity duration-700"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-500"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        I will appear and disappear.
      </Transition>