Update `Transition` component to allow to be renderless

[barryofguilder]

I've noticed that the Transition component always renders an element (div by default). There are a lot of Tailwind UI examples that pass a React Fragment component to Transition so it doesn't render anything. Is that possible with Ember? I mainly ask because it's more difficult to implement Tailwind UI code examples with the Ember version since you end up with an extra element in the hierarchy that messes with styling.

Here is an example from Tailwind UI for building a select menu:

<Transition
  show={open}
  as={Fragment}
  leave="transition ease-in duration-100"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>

[far-fetched]

hey :wave: You can pass tagName argument to override the default div element: https://github.com/GavinJoyce/ember-headlessui/blob/master/ember-headlessui/addon/components/transition.js#L39-L41

[roomman]

I raised a similar point in this PR with code examples of how the Ember invocation differs the official docs: https://github.com/GavinJoyce/ember-headlessui/pull/129#issuecomment-1043060672

I feel like someone needs to decide if we are mirroring the official implementation or not. 🧐

[NullVoxPopuli]

I think we should mirror the output and behavior, but not necessarily the implementation. There are a ton of anti patterns in the react implementation, for example.

That said, we don't need a div in a component, but then what do you animate? Animations in ember are what you'd find on MDN, which need an element to animate.

The implementation i think would be best would be for Transition to yield a modifier that you can then place on the element you want to animate. That way it's clear what is being animated.

[barryofguilder]

@NullVoxPopuli oh, I like the idea of it yielding a modifier! I'm not exactly sure how the React implementation works when it doesn't render an element. I'm assuming that it applies the transitions to the child element.

hey 👋 You can pass tagName argument to override the default div element: https://github.com/GavinJoyce/ember-headlessui/blob/master/ember-headlessui/addon/components/transition.js#L39-L41

Yeah, but that doesn't work if you try to pass something like an empty string to mimic the React Fragment (which doesn't render an element).