Vue.js [v-cloak]不使用CSS过渡

Question

我的意图：

使用Vue.js（v2）属性[v-cloak]，我希望隐藏“ app”，直到准备好为止。删除[v-cloak]后，我希望“ app”淡入。使用CSS不透明度和过渡效果来实现淡入淡出。

问题：

从我的“应用”中删除[v-cloak]后，没有任何过渡。它只是从隐藏变为立即可见。似乎忽略了CSS。

例：

我使用Vue.js和JavaScript模拟版本做了一个夸张的示例，以展示它们的行为。

https://codepen.io/freemagee/pen/wXqrRM

查看此示例时，您将在5秒钟内看到“普通的旧JavaScript”红色框。但是，Vue受控版本不会出现褪色。它们在过渡时共享相同的CSS，因此理论上应该以相同的方式工作。

有人有效地使用了[v-cloak]来实现平滑过渡吗？

密码笔代码

的HTML

<div id="app" v-cloak>
  <div class="red-box"></div>
  <p>Vue.js {{ message }}</p>
</div>

<div id="app2" v-cloak>
  <div class="red-box"></div>
  <p>Plain old JavaScript</p>
</div>

的CSS

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

[v-cloak] .red-box {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 5s, opacity 5s linear;  
}

#app,
#app2{
  padding-top: 50px;
}

.red-box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: red;
  opacity: 1;
  visibility: visible;
  transition: opacity 5s linear;
}

p {
  text-align: center;
}

JS

new Vue({
  el: "#app",
  data: {
    message: "Hello world"
  }
});

window.setTimeout(function() {
  document.getElementById("app2").removeAttribute("v-cloak");
}, 500);

Answer 1

这是行不通的，因为在 Vue 应用程序实例初始化之后，该#appdiv 实际上被移除、重新渲染并变成了一个不同的 div，即使它看起来是一样的。这可能是由于 Vue 的虚拟 DOM 机制。

该#app2元素仍然是相同的DOM之后document.getElementById("app2").removeAttribute("v-cloak");：https://codepen.io/jacobgoh101/pen/PaKQwV

所述#app元件是不同的DOM之后new Vue(...)：https://codepen.io/jacobgoh101/pen/ERvojx?editors=0010

对于 Vue 应用程序，v-cloak删除了带有的元素，然后v-cloak添加了另一个没有的元素。没有元素可以从“有v-cloak”过渡到“没有v-cloak”。这就是 CSS 过渡不起作用的原因。希望这已经足够清楚了。

（如果您还不知道这一点，）您可以使用Transition Component