Version

3.2.12

Reproduction link

codesandbox.io

Steps to reproduce

1. Load the CodeSandbox link. Note that there are several transition-related warnings in the console
2. Click the button. Note that the hidden paragraph doesn't appear, and there are two more warnings in the console.

What is expected?

No warnings should be thrown on startup. When the button is clicked, the hidden text should appear.

What is actually happening?

The hidden text does not appear. The following warnings are thrown on startup:

• Template compilation error: <Transition> expects exactly one child element or component.
• <transition> can only be used on a single element or component. Use <transition-group> for lists.
• Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. The latter two warnings also repeat every time the button is clicked.

The comment itself isn't at fault: the comment gets filtered out by the transition code. However, there's also a whitespace-only text node between the comment and the <p>, and that doesn't get filtered out. So the <transition> tag sees that it has two children (the text node and the <p>), freaks out, and refuses to function.

This is related to #4621 and #4622, which are also about whitespace-only text nodes breaking transitions (but for <transition-group> instead of <transition>).