版本

2.6.10

复制链接

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)
})

重现步骤

• x1m0n1x

需要什么？

服务器响应应该包含应用于转换元素的*enter类。然后，在hydration期间应该应用*active类，以便转换可以平滑地出现。

到底发生了什么？

首先显示元素，就像没有过渡一样。然后整个动画开始，产生连线动画。