`<Transition appear>` leads to hydration mismatch with SSR

[danielroe]

Vue version

3.5.14

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNp9kbtuwzAMRX9F4BzYQzsFboC2yJAObdFm1CLYrKNUL4iSayDwv1eS8xqCbMQ9l+SldIBn56ohIiyhCaidEgFX3DDWbL0wJIO0hgnnUPgiJ9DJgbVKED1xkFqUksNqw3ZiQEZW44yRmjp552n1ZVwSmvpqFywgUGvNj+yrPVmTohxyD4fWaicV+g+X+9KSJSskM6GU/XsrWvARFye93WH7e0Pf05g1Dp8eCf2AHM4sCN9jmPH6+x3HVJ+htl1UyX0HfiFZFXPG2fYSTZdiX/lK2o121gdp+i2tx4DpOY5H5aDZORU/h/Qfr3dOv8R9qB5LHzcTTP/lXpeM

App.vue:

<template>
  <Transition appear>
    <div class="imaclass">I have some classes</div>
  </Transition>
</template>

Steps to reproduce

When you open the reproduction you will see the following message in the lower right corner: 'Hydration completed but contains mismatches.'

More info:

[Vue warn]: Hydration class mismatch on 
<div class="imaclass v-enter-from v-enter-active"> 
  - rendered on server: class="imaclass v-enter-from v-enter-active"
  - expected on client: class="imaclass"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <BaseTransition appear=true persisted=false mode=undefined  ... > 
  at <Transition appear=true > 
  at <Repl>

What is expected?

I expect no hydration mismatch.

What is actually happening?

There is a hydration mismatch.

System Info

Any additional comments?

related: #12046, #12047

[oom-]

@danielroe, Thank you for the reopening I was about to do it right now. 👍🏻

Describe the bug

If a div is surrounded by a Transition tag with :appear="true" and that this div has it's own class, it provoque an Hidratation mismatch.

✔ Working:

<Transition name="fade-in" >
    <div v-if="isOpen" class="imaclass">I have some classes</div>
</Transition>

✔ Working:

<Transition name="fade-in" :appear="true">
    <div v-if="isOpen">I have some classes</div>
</Transition>

❌ No Working:

<Transition name="fade-in" :appear="true">
    <div v-if="isOpen" class="imaclass">I have some classes</div>
</Transition>

Additional context

chrome_jADm3IRPpZ.mp4

Logs

- rendered on server: class="imaclass fade-in-enter-from fade-in-enter-active"
- expected on client: class="imaclass"