feat(ssr): transition appear work with SSR

[edison1105]

close #6951

Solution:

• Compile phase: If Transtion with appear, wrap it in template after compilation:

<Transition appear>
  <div>foo</div>
</Transition>

function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  _push(`<template><div${_ssrRenderAttrs(_attrs)}>foo</div></template>`)
}

• Hydration phase: Replace the template element with an element within the template

see demo

[slavanossar]

@posva Is it possible to get this tagged p4-important to align it with #6951? It's causing downstream issues in Nuxt that breaks enter page transitions on initial load. Thanks!

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	86.5 kB (+503 B)	32.9 kB (+171 B)	29.7 kB (+164 B)
vue.global.prod.js	132 kB (+503 B)	49.6 kB (+174 B)	44.5 kB (+167 B)

Usages

Name	Size	Gzip	Brotli
createApp	47.9 kB (+26 B)	18.9 kB (+9 B)	17.3 kB (+56 B)
createSSRApp	51.2 kB (+503 B)	20.2 kB (+185 B)	18.4 kB (+174 B)
defineCustomElement	50.3 kB (+26 B)	19.7 kB (+7 B)	17.9 kB (-36 B)
overall	61.3 kB (+26 B)	23.7 kB (+12 B)	21.6 kB (-29 B)