transitions with appear should be SSR with the "-enter" class

[matthieusieben]

Version

2.6.10

Reproduction link

mkdir vue-bug-repo
yarn init -y
yarn add vue vue-server-renderer

// Step 1: Create a Vue instance
const Vue = require('vue')
const app = new Vue({
  data: () => ({ show: true }),
  template: `<div>
    <transition appear name="fade">
      <p v-if="show">
      Hello World
      </p>
    </transition>
  </div>`
})

// Step 2: Create a renderer
const renderer = require('vue-server-renderer').createRenderer()
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

Steps to reproduce

• node index.js

What is expected?

The server response should contain the *enter classes applied to the transitioning element. The *active classes should then be applied during the hydration so that the transition can appear smoothly.

What is actually happening?

The element is first displayed, as if there were no transitions. Then then entire animation starts, causing wired animations.

[matthieusieben]

This issue is still unresolved.

[milesingrams]

I have this issue too. Expecting appear transitions to have the appear-from class applied on static generation and SSR so the initial position can be appropriately rendered until vue mounts

[drewbaker]

Yeah I expected that appear works for initial animation when SSR or client side render occurs. Otherwise not sure the point of appear, if I need to toggle a v-if on mounted to get the initial animation to happen anyway.