Transition no longer maintaining class specified in enterTo at end of transition.

[tomelliot]

What package within Headless UI are you using? @headlessui/react

What version of that package are you using?

v1.7.18

What browser are you using?

Chrome Version 121.0.6167.160 (Official Build) (arm64)

Reproduction URL

repro

Describe your issue

A <Transition> that would previously fade out and stay at opacity-0 no longer stays at opacity-0 at the end of the transition. After fading out it pops back to full visibility (the opacity-0 class is removed).

        <Transition
          appear={true}
          show={true}
          enter="transition-opacity ease-in-out duration-1000"
          enterFrom="opacity-100"
          enterTo="opacity-0"
          aria-hidden="true"
        >
          <div>
            <CheckCircleIcon className={clsx("h-5 w-5 text-green-500")} />
          </div>
        </Transition>

[mrajaei76]

i have the same problem after upgrading to version 1.7.18

[noynek]

I've got the same problem using 2.0.0-alpha.4 which is required for Catalyst.

[areriklq]

This seems similar to this issue (?): #2914 According to my bisect it broke in v1.7.18 (which seems to echo others here)

[RobinMalfait]

Hey!

This should be fixed by #3074, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.

[areriklq]

Hi @RobinMalfait ,

Sorry for the late response, but I just now tried to update to 1.7.19 and it does not solve the transition regression that was introduced in 1.7.18 (but I don't see it mentioned in the release notes either so it might be expected?).

However, v2.0.2 does solve the issue I was seeing. ✅ Thanks!