Transition not triggering @appear when used as the root of a component with appear attr

[badz0]

Version

2.5.22

Reproduction link

https://codepen.io/bogdan-muranets/pen/ErjOXy

Steps to reproduce

Open repro, click on the "show" button and note that "animated on enter" text appeared.

What is expected?

To see a text "animated on appear" which has to be added by @appear hook.

What is actually happening?

The @enter hook is called instead of @appear.

---

Important is that transition is moved to separate component. Also, everything works as expected if transition isn't a root element in a separate component or the component is functional.

[Itisfilipe]

Consider this snippet (and comment)

vue/src/platforms/web/runtime/modules/transition.js

Lines 62 to 74 in 0b16927

	// activeInstance will always be the <transition> component managing this
	// transition. One edge case to check is when the <transition> is placed
	// as the root node of a child component. In that case we need to check
	// <transition>'s parent for appear check.
	let context = activeInstance
	let transitionNode = activeInstance.$vnode
	while (transitionNode && transitionNode.parent) {
	transitionNode = transitionNode.parent
	context = transitionNode.context
	}
	const isAppear = !context._isMounted || !vnode.isRootInsert

Also, from the docs "If you also want to apply a transition on the initial render of a node".

Since the appear is placed as Root of the element the transaction will consider the parent element and since it is already rendered the appear hook will be skiped.

[posva]

From my perspective, the behaviour is not consistent as the appear does trigger if the transition element is wrapped with a different element like a div

[yyx990803]

closed via #9668