Add entered prop to Transition components

[RobinMalfait]

This PR will allow you to add an additional entered prop with a bunch of classes. This prop contains all the classes that you want to make sure that exist when the transitions are done.

E.g.:

<Transition
  enter="duration-300 transition-opacity"
  enterFrom="opacity-0"
  enterTo="opacity-75"
  entered="opacity-75"
>
  <div className="..."></div>
</Transition>

If we don't have this then the opacity-75 would be gone after it is done transitioning. This will result in a full opaque background.

Can't we solve this already:
Yes, there are some situations where it is doable to solve these kind of problems. For example you can transition from opacity-0 to opacity-100 and keep a bg-opacity-75 always applied. But this doesn't work for other utilities.

Can't you keep the classes that exist before transitioning, and make sure they are applied once everything is done?
Yes, but there is an issue. If you enter from opacity-0 and enter to opacity-75, and by default your className contains opacity-75, then there is a moment in time that opacity-0 and opacity-75 are applied at the exact same time. This might work, but it's better not to rely on the same utility kind of class to be applied at the exact same time.

Why don't we just apply the enterTo once it is done?
This will work in a lot of cases, but it won't once your enterTo and leaveFrom are different.

Here is a small video showcasing what this feature does:

Screen.Recording.2021-05-11.at.13.24.33.mov

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-react – ./packages/@headlessui-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/JCUk5xbmh2MhDrMjxcU8mVWhi1ZB
✅ Preview: https://headlessui-react-git-add-entered-prop-tailwindlabs.vercel.app

headlessui-vue – ./packages/@headlessui-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/BJ9xAqXKr28ooLhfgYvRdhVYECx4
✅ Preview: https://headlessui-vue-git-add-entered-prop-tailwindlabs.vercel.app