我的意图:
使用 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);
最佳答案
这是行不通的,因为在 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
关于javascript - Vue.js [v-cloak] 不使用 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50859676/