Как убрать залагивание бургерного меню при обновлении страницы?

Question

ArgoSH @ArgoSH

Как убрать залагивание бургерного меню при обновлении страницы?

Всем привет. С версткой я на вы, в связи с чем возник, скорее всего, глупый вопрос. Установил на сайт бургерное меню для мобильной версии, вроде даже работает, но при частом обновлении страницы "невидимые" элементы меню мелькают на экране и удаляются прочь.
Что не так в используемом мною коде (найденом на просторах интернета и извращенно измененным мной)?

$('.open-button').click(function() 
{
        if(!$('.menu-button').hasClass('open-done'))
        {
            $('.menu-button').addClass('open-done');
            $('.menu-block-2').addClass('open-done');
            setTimeout(function(){$('.mob_mini_logo').addClass('open-done')}, 400);
            setTimeout(function(){$('.mob_logo_link').addClass('open-done')}, 400);
            setTimeout(function(){$('.menu-link-1').addClass('open-done')}, 400);
            setTimeout(function(){$('.menu-link-2').addClass('open-done')}, 500);
            setTimeout(function(){$('.menu-link-3').addClass('open-done')}, 600);
            setTimeout(function(){$('.menu-link-4').addClass('open-done')}, 700);
        }
        else
        {
            $('.menu-button').removeClass('open-done');
            $('.menu-link-1').removeClass('open-done');
            setTimeout(function(){$('.menu-link-2').removeClass('open-done')}, 100);
            setTimeout(function(){$('.menu-link-3').removeClass('open-done')}, 200);
            setTimeout(function(){$('.menu-link-4').removeClass('open-done')}, 300);
            setTimeout(function(){$('.mob_mini_logo').removeClass('open-done')}, 400);
            setTimeout(function(){$('.mob_logo_link').removeClass('open-done')}, 400);
            setTimeout(function(){$('.menu-block-2').removeClass('open-done')}, 450);

        }
});

<div class="mob_m_1"><a href="index.html"><div class="log_mob"></div></a></div>
<div class = "menu-button open-button"></div>
<div class = "menu-block-2"></div>
<nav class="mob_nav">
    <ul>
        <li><a href = "index.html" class = "menu-link-1 open-button">Главная</a></li>
        <li><a href = "services.html" class = "menu-link-2 open-button">Услуги</a></li>
        <li><a href = "us.html" class = "menu-link-3 open-button">О нас</a></li>
        <li><a href = "contact.html" class = "menu-link-4 open-button">Контакты</a></li>
    </ul>
</nav>

<div class="mob_logo_link"><a href = "index.html"><div class="mob_mini_logo"></div></a></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="nav.js"></script>

.log_mob {
  background-image: url(images/Earthome_main.png);
  background-position: center center;
  background-size: cover;
  height: 40px;
  width: 140px;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}










/*Кнопка меню*/
.menu-button
{
    background-color: #222;
    height: 40px;
    width: 50px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 100;
    border-radius: 6px;
    opacity: .7;
}
.menu-button:after
{
    content: "";
    background-color: white;
    height: 3px;
    width: 50%;
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s ease;
}

.menu-button.open-done:after
{
    transform: rotate(45deg);
    left: 17px;
    top: 18px;
}

.menu-button:before
{
    content: "";
    background-color: white;
    height: 3px;
    width: 50%;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s ease;
}

.menu-button.open-done:before
{
    transform: rotate(-45deg);
    left: 17px;
    top: 18px;
}

.menu-button.open-done {
  position: fixed;
}

.menu-block-2
{
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background-color: #222;
    transition: 1s;
    z-index: 90;
}
.menu-block-2.open-done
{
    width: 100%;
}

nav
{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    visibility: hidden;
}

nav ul {
padding-left: 0px;
}

nav ul li
{
    margin-top: 10vh;
    list-style-type: none;
    padding-left: 0px;
}
nav ul li a
{
    text-decoration: none;
    text-align: center;
    color: white;
    font-weight: 200;
    font-size: 22px;
    display: block;
    transform: translateX(150px);
    opacity: 0;
    visibility: hidden;
    transition: 0.5s,
                0.4s opacity,
                1s transform;
}



nav ul li a.open-done
{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}


.mob_logo_link.open-done {
  margin-top: 20px;
  height: 70px;
  z-index: 100;
  display: block;
  position: fixed;
  left: 50%;
  margin-left: -45px;
  top: 40px;
/*  transform: translateX(0);
  opacity: 1;
  visibility: visible;*/
}

.mob_mini_logo.open-done {
  width: 90px;
  height: 70px;
  background-image: url(images/EH.png);
  background-position: center center;
  background-size: cover;


}

Подозреваю, что никто не станет копаться в коде, но, может быть, будет понятна суть проблемы и вы сможете указать куда мне смотреть/читать/искать.

Описать сложно, в первое мгновение при загрузке сайта бывает видны пункты меню и они быстро сматываются вправо. Вроде как срабатывает translateX, но как этот вопрос решить? Попробуйте сами пообновлять здесь

Зафиксировал косяк на ios 13 (iphone x) в хроме и сафари. На андройде не удалось воспроизвести

+ 1 еще один косяк. Upd. Этот косяк не актуален, решилось очисткой кэша. Основной вопрос в силе