如何消除过渡时的隐藏效果？

Question

我在768px以上的导航栏中的链接存在问题。

@media screen and (max-width: 1200px) {
    .NavLinks {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .NavLinks {
        position: absolute;
        right: 0;
        height: 92vh;
        top: 8vh;
        background-color: #2980b9;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform .5s ease-in;
    }
    .NavLinks li {
        opacity: 0;
    }
    .Burger {
        display: block;
    }
}

.NavLinksActive {
    transform: translateX(0%);
}

当我将窗口最小化到768px以上时，我会看到导航栏隐藏，在那之后一切都还不错，但是效果并不理想。如何消除这种影响？希望你能理解我的问题。