Dynamic Transition classes do not change instantly

[ycs77]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.14

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/sandbox/vite-headlessui-transition-with-floatingui-flip-update-placement-bug-hjujot?file=%2Fsrc%2FApp.jsx

Open the codesandbox above and scroll to the bottom and click the "Button" twice, then scroll back to the top and click the "Button" once, here the transition is expected from bottom to top, but actually is top to bottom.

Describe your issue

Here I use Headless UI Popover with Floating UI and enable flip to automatically change the placement when the window scrolls, so that the Popover will appear as much as possible.

<Transition
  enter="transition duration-200 ease-out"
  enterFrom={`opacity-0 ${
    placement.startsWith("top") ? "translate-y-4" : "-translate-y-4"
  }`}
  enterTo="opacity-100 translate-y-0"
  leave="transition duration-150 ease-in"
  leaveFrom="opacity-100 translate-y-0"
  leaveTo={`opacity-0 ${
    placement.startsWith("top") ? "translate-y-4" : "-translate-y-4"
  }`}
>

My expected transition direction is: if the placement is top/top-start, it will transition from bottom to top when it is turned on; if it is bottom/bottom-start, it will transition from top to bottom when it is turned on. But when the switch is finished and the scroll window switches directions, the transition direction of opening again will not be the expected one.

Is there any way to achieve this while keeping the Headless UI usage?

[ycs77]

Continue #2550, #2730