React: TransitionChild: enterTo is not respected in multi transition and deprecated: entered must be present.

[Thurtilla]

The property on TransitionChild: enterTo="opacity-80" does not respect this in multi transition. Old deprecated: entered="opacity-80" must be used to not go to 100 opacity after transition ends.

[anntnzrb]

Root Cause: enterTo classes are only applied during the active transition phase. When a transition completes, the element transitions to a "closed" state, removing enterTo classes. This is especially problematic in multi-transition scenarios.

Fix: Use the entered prop (Recommended)

<Transition show={isOpen}>
  <Transition.Child
    enter="transition-opacity duration-300"
    enterFrom="opacity-0"
    enterTo="opacity-80"     // During transition
    entered="opacity-80"     // After transition completes
  >
    Content
  </Transition.Child>
</Transition>

Alternative: Data attributes (v2.1+)

<Transition show={isOpen}>
  <div className="transition duration-300 data-[closed]:opacity-0">
    Content
  </div>
</Transition>

Why: With multiple TransitionChild components, each manages its own transition state. The entered prop ensures the final state persists regardless of state changes, making it reliable for multi-transition scenarios.

Source: /packages/@headlessui-react/src/components/transition/transition.tsx:490

[Thurtilla]

While the "entered" prop sort of solves the issue, its not 100%. This is also a deprecated prop, which means that its not meant to be used.

I have not tested using Data attributes, but according to the documentation, the reason why we SHOULD be able to use enterTO and leaveFrom is exactly this (atleast to my understanding of the updated docs)

as={Fragment}
          enter="ease-out duration-300"
          enterFrom="opacity-0"
          enterTo="opacity-75"
          leave="ease-in duration-200"
          leaveFrom="opacity-75"
          leaveTo="opacity-0"

This should in theory work, but is wonky with the animations.

With "entered" it stops at 75 atleast, but when the "close" animation is triggered, it blinks to 100%, so it doesn't look good.

Im pretty sure its just bugged that the classes doesn't actually work the way they are intended.