如何防止 Vue.js 隐藏元素在页面加载时弹出？答案

【问题标题】：How to prevent Vue.js hidden element pop-in on page load?如何防止 Vue.js 隐藏元素在页面加载时弹出？
【发布时间】：2020-08-20 00:26:36
【问题描述】：

我是 Vue.js 的新手，我有一个（块）元素，最初应该在页面加载时隐藏。我来自一个混合了 JQuery 背景的纯 JS，所以通常我最初会在元素上设置 display:none，使用 JQuery 的显示/隐藏方法等。

我可以在 Vue 中正常显示和隐藏，但副作用是页面加载时元素会在屏幕上短暂闪烁，直到 Vue 设置完成并且它知道隐藏元素。设置display:none 可能会破坏显示/隐藏，因为元素类道具具有更高的优先级。设置 opacity:0 似乎也覆盖了 Vue 所做的任何事情，从而也破坏了显示/隐藏。 Vue 动画类上的 !important 也无济于事。

下面的嵌入式沙箱可能不是重现此问题的最佳方法，我想它也可能与系统有关（速度、内存等），但肯定这是一种常见的情况，有一些我错过的解决方案.

VUE = new Vue({
    el: '#app',
    data: {
        showFullpageSpinner: false
    }
});

setTimeout(function() {
    VUE.showFullpageSpinner = true;
    setTimeout(function() { VUE.showFullpageSpinner = false; }, 1500);
}, 1500);

.fullpage-spinner-underlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9999;
}
.fullpageSpinner-enter-active, .fullpageSpinner-leave-active {
    transition: opacity .25s;
}
.fullpageSpinner-enter, .fullpageSpinner-leave-to {
    opacity: 0;
} 
.css-spinner {
    position: absolute;
    display: inline-block;
}
.css-spinner:before {
    content: 'Loading...';
    position: absolute;
}
.css-spinner:not(:required):before {
    content: '';
    border-radius: 50%;
    border-top: 3px solid #daac35;
    border-right: 3px solid transparent;
    animation: spinner .7s linear infinite;
    -webkit-animation: spinner .7s linear infinite;
}
@keyframes spinner {
    to {-ms-transform: rotate(360deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes spinner {
    to {-webkit-transform: rotate(360deg);}
    to {transform: rotate(360deg);}
}
@-moz-keyframes spinner {
    to {-moz-transform: rotate(360deg);}
    to {transform: rotate(360deg);}
}
.fullpage-loading-spinner {
    left: 50%;
    top: 45%;
    margin-left: -40px;
    margin-top: -55px;
}
.fullpage-loading-spinner:BEFORE {
    width: 55px;
    height: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="fullpageSpinner">
    <div v-if="showFullpageSpinner" class="fullpage-spinner-underlay">
        <div class="css-spinner fullpage-loading-spinner"></div>
    </div>
  </transition>
</div>

【问题讨论】：

默认有showFullpageSpinner = true？
@A.Lau 但我不希望它最初显示。这就是问题所在，它应该被隐藏，直到稍后页面上发生某些事件以响应某些事件。问题是当它在页面加载时在屏幕上短暂闪烁时。 display:none on .fullpage-spinner-underlay 通常会解决这个问题，但这样做会破坏 Vue 的显示/隐藏

标签： vue.js

【解决方案1】：

您的问题似乎可以通过 v-cloak 指令解决。

该指令将保留在元素上，直到关联的 Vue 实例完成编译。结合 [v-cloak] { display: none } 等 CSS 规则，该指令可用于隐藏未编译的 mustache 绑定，直到 Vue 实例准备就绪。

例子：

[v-cloak] {
  display: none;
}

<div v-if="showFullpageSpinner" class="fullpage-spinner-underlay" v-cloak>
  <div class="css-spinner fullpage-loading-spinner"></div>
</div>

【讨论】：