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

Question

我的意图:

使用 Vue.js (v2) 属性 [v-cloak]，我想在准备好之前隐藏“app”。当 [v-cloak] 被移除时，我希望“应用程序”淡入。使用 CSS 不透明度和过渡来实现淡入淡出。

问题:

当 [v-cloak] 从我的“应用程序”中删除时，没有像我预期的那样进行转换。它只是从隐藏立即可见。似乎忽略了 CSS。

示例:

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

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

查看此示例时，您会看到“Plain old JavaScript”红框在 5 秒内淡入 View 。但是 Vue 控制的版本只是出现而没有淡入淡出。它们为转换共享相同的 CSS，因此理论上应该以相同的方式工作。

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

Codepen 代码

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 应用程序实例初始化之后，#app div 实际上被删除、重新渲染并变成了不同的 div，即使它看起来一样。这可能是由于 Vue 的虚拟 DOM 机制。

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

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

对于 Vue 应用程序，删除了带有 v-cloak 的元素，添加了另一个没有 v-cloak 的元素。 没有元素从“使用v-cloak”过渡到“不使用v-cloak”。这就是为什么 CSS 过渡不会工作。希望这已经足够清楚了。

(如果您还不知道，)您可以使用 Transition Component