Vue.js [v-斗篷]不使用CSS转换。
我的意图：：
使用Vue.js (v2)属性v2，我希望在准备就绪之前隐藏"app“。当v斗篷被移除时，我想要“应用程序”淡入。使用CSS的不透明度和过渡来实现淡出。
问题：
当v斗篷被从我的“应用程序”中移除时，没有我所期望的转换。它很快就会从隐藏变为可见。似乎忽略了CSS。
示例：
我用Vue.js和JavaScript模拟版本做了一个夸张的例子，展示了它们的行为。
https://codepen.io/freemagee/pen/wXqrRM
当查看此示例时，您将看到“纯旧JavaScript”红色框在5秒以上消失。但Vue控制版本的出现并没有褪色。他们在转换过程中共享相同的CSS，因此理论上应该以同样的方式工作。
有人用v斗篷来实现平稳过渡吗？
代码
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);
回答 2
Stack Overflow用户
发布于 2018-06-14 07:05:28
这不起作用，因为在Vue应用实例初始化之后， div实际上被删除、重新呈现，并变成了一个不同的div，尽管它看起来是一样的。这可能是由于Vue的虚拟DOM机制。
#app2元素在document.getElementById("app2").removeAttribute("v-cloak");：https://codepen.io/jacobgoh101/pen/PaKQwV之后仍然是相同的DOM
#app元素是new Vue(...)：https://codepen.io/jacobgoh101/pen/ERvojx?editors=0010之后的不同DOM
对于Vue应用程序，删除了带有v-cloak的元素，添加了另一个没有v-cloak的元素。CSS转换没有从“without v-cloak**”“转换到没有** v-cloak**".**的元素，这就是为什么CSS转换不能工作的原因。希望这是足够清楚的。
(如果你还不知道这个，)你可以使用过渡分量
Stack Overflow用户
发布于 2018-08-15 13:25:03
正如所解释的，v斗篷不可能发生转换，因为没有v斗篷的DOM元素是一个新元素。
我想出了一个简单的解决办法，使用已挂载方法及其挂钩vm.$nextTick()，在这种情况下，使用v斗篷已经不再必要了。
当最初的app元素替换为Vue生成的新元素时，就会调用挂载，但这并不一定意味着每个子元素都已呈现。当每个子元素都呈现在app视图中时，就会调用nextTick。
首先，我设置了HTML app元素，如下所示：
<div id="main-view" :class="{ready: isPageReady}">...</div>在我的虚拟应用程序中：
new Vue({
el: "#main-view",
data: {
isPageReady: false,
[...]
mounted: function() {
this.$nextTick(function () {
this.isPageReady = true;
});
}
});最后，在CSS中，我尝试了一种使用不透明度的简单方法：
#main-view {
opacity: 0;
}
#main-view.ready {
opacity: 1;
transition: opacity 300ms ease-in-out;
}注意:如果浏览器的检查器/调试器处于打开状态，则转换并不总是显示。
https://stackoverflow.com/questions/50859676
复制
腾讯云开发者
