Version

3.2.12

Reproduction link

sfc.vuejs.org/

Steps to reproduce

• Load the SFC playground link. Note that it throws a warning on load.
• Click the "Toggle transition" button. Note that this throws a warning, but otherwise behaves correctly.
• Click the "Toggle transition" button again. This throws an error.

What is expected?

The transition toggles without warnings or errors.

What is actually happening?

• When the SFC playground loads, it throws the warning Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
• When the transition toggles on, it throws the warning Component inside <Transition> renders non-element root node that cannot be animated.
• When it toggles off, it throws the error child.el.getBoundingClientRect is not a function.

This only happens if one of the things being toggled inside a <transition-group> is a component with multiple root elements. Somehow, this results in the TransitionGroup code trying to process a text node (namely, the whitespace node at the beginning of the transition-group div, before the first child element) as part of the transitioned nodes. This is why it complains about the component rendering "fragment or text root nodes", then about a "non-element root node" (the text node), and why it crashes (it tries to call .getBoundingClientRect() on this text node).

The real-world case where I ran into this bug used a wrapped transition group (<transition-group tag="div">). Adding tag="div" makes the first warning (the one on load about extraneous non-props attributes) go away, but doesn't fix the second warning or the error.