Update `Transition` component to allow to be renderless about ember-headlessui

[roomman]

I raised a similar point in this PR with code examples of how the Ember invocation differs the official docs: #129 (comment)

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

[far-fetched]

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

[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).