模式弹出窗口显示其在f5上的过渡

Question

我正在使用: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, 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;
    }
}

隐藏的可见性似乎不会在页面加载时立即影响此元素