Transition leave property with duration looks like set delay not the transition duration.

[vitpankin]

This code snippet works unexpectedly. leave="transition linear duration-1000" doesn't make transition smooth, it delays disappearing of the backdrop but it's still rapid. So I believe somehow it sets transition-delay property, not the needed transition-duration.

                <Transition
                  as={Fragment}
                  enter="transition ease-out duration-500"
                  enterFrom="opacity-0 translate-y-1"
                  enterTo="opacity-100 translate-y-0"
                  leave="transition linear duration-1000"
                  leaveFrom="opacity-100 translate-y-0"
                  leaveTo="opacity-0 translate-y-1"
                >
                  <Popover.Overlay className="fixed inset-0 bg-black opacity-30" />
                </Transition>

@headlessui/react v1.7.12
tailwindcss v3.2.6

Chrome

[RobinMalfait]

You are transitioning the overlay using opacity which is fine, however you already apply an opacity-30 which would conflict with the opacity-0 and opacity-100. Instead you can set the opacity to the background itself:

- <Popover.Overlay className="fixed inset-0 bg-black opacity-30" />
+ <Popover.Overlay className="fixed inset-0 bg-black/30" />

Hope that helps!