Is it possible to make a TransitionGroup instantly unmount its contents?

[r-thomson]

I'm building a dialog component with a structure like this (Vue):

<TransitionRoot as="template">
  <Dialog as="div">
    <TransitionChild as="template">
      <DialogPanel as="div">
        <slot />

A problem I'm encountering currently is that multiple on-screen dialogs are not supported (without nesting). A common pattern in this app is that one dialog closes while another opens. As it turns out, even with no "leave" transition defined (or a 0s transition), there's still a slight delay between a TransitionGroup's show prop being set to false and its content being unmounted. This leads to multiple active dialogs, and things break.

What I'd like is a way to ensure that the contents of a <TransitionGroup> are unmounted instantly when show="false".

Example

https://codesandbox.io/s/summer-dream-yugr71

Note that when the transition is animating out, the "don't render me" text is briefly visible.

What I've Tried

• <Dialog v-if="...">

  Works, but you can't use as="template" on the <TransitionRoot>; I'd like to avoid unnecessary DOM elements if I can help it.

• <TransitionRoot appear show v-if="...">

  Also works, but this definitely feels like a hack to me.