我正在使用:target
而不使用JavaScript来创建模式弹出窗口。一切都很棒,直到我开始进行一个很好的淡入/淡出过渡为止。刷新页面时,可以看到过渡时间的模式。
<a class = 'row__th__import' href="#popupTargets">Import</a>
...
<div class="popup" id="popupTargets">
// some stuff
</div>
SCSS:
.popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
box-shadow: 0 0 1px 100vw rgba(0,0.7);
margin: 3% auto;
padding: 1%;
background: $white;
border-radius: 5px;
width: 40%;
display: flex;
flex-direction: column;
opacity: 0;
transition: 500ms;
&:target {
opacity: 1;
visibility: visible;
}
}
隐藏的可见性似乎不会在页面加载时立即影响此元素