有没有办法避免页面刷新时出现这种闪烁,它是一个modal以HTML为主的组件slot,但是当我刷新页面时它会闪烁.我的应用程序没有使用路由器,因此它不是完整的SPA.
看到gif.
这是代码.
.body {
padding: 2em;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.modal-mask {
position: absolute;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 70%;
margin: 1em auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* The following styles are auto-applied to elements with
* transition="modal" when their visibility is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
Text in a modal
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Popover in a modal
This button should trigger a popover on click.
Tooltips in a modal
This link and that link should have tooltips on hover.
Overflowing text to show scroll behavior
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
custom header
大多数情况下,这是因为你的vue.js需要加载,直到它能够做你想要的.
您基本上加载默认可见的html内容.
在加载vue和vue之后的html会因你的v-if或v-show语句而隐藏你的内容.确保这样的事情没有发生的最简单的方法是使用v-cloak指令加上一点css.
将其置于此示例中给出的非常高的水平
和CSS
[v-cloak] { display: none; }
一旦vue完成加载,v-cloak属性将被删除.因此,一切都被隐藏,直到vue完成加载.这应该确保您的内容不闪烁.
京公网安备 11010802040832号 | 京ICP备19059560号-6 