Лагает анимация на телефоне js

На компьютере анимация работает отлично, но на телефоне она лагает.
Вот на это странице можно посмотреть

function predUslugiSl(a) {
  if (eval("typeof " + "window.sch" + a.innerText.replaceAll(" ", "") + " == 'undefined'")) {
    eval("window.sch" + a.innerText.replaceAll(" ", "") + " = true");
  }
  uslugiSl(a);
}

function uslugiSl(a) {
  window.oul = a.nextElementSibling.children;
  window.oulCount = window.oul.length;
  window.mmm = a;
  if (eval("window.sch" + window.mmm.innerText.replaceAll(" ", ""))) {
    for (var i = 0; i < window.oul.length; i++) {
      window.oul[i].style.visibility = "hidden";
    }
    window.mmm.nextElementSibling.style.display = "flex";
    window.mmm.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.src = "img/arrowReverse.png";
    window.h = window.mmm.nextElementSibling.offsetHeight;
    window.mmm.nextElementSibling.style.marginTop = "-" + String(window.h) + "px";
    window.g = Number(window.mmm.nextElementSibling.style.marginTop.replace("px", ""));
    spusk();
    eval("window.sch" + window.mmm.innerText.replaceAll(" ", "") + " = false");
  } else {
    window.mmm.firstElementChild.nextElementSibling.firstElementChild.nextElementSibling.src = "img/arrow.png";
    window.gg = Number("-" + String(window.h));
    podn();
    eval("window.sch" + window.mmm.innerText.replaceAll(" ", "") + " = true");
  }
}

function spusk() {
  window.g += 3;
  window.mmm.nextElementSibling.style.marginTop = window.g + "px";
  for (let i = 0; i < window.oulCount; i++) {
    if (window.mmm.offsetTop + 5 < window.oul[i].offsetTop) {
      window.oul[i].style.visibility = "visible";
    }
  }
  if (window.g < 0) {
    window.setTimeout(spusk, 1);
  }
}

function podn() {
  window.g -= 3;
  window.mmm.nextElementSibling.style.marginTop = window.g + "px";
  for (var i = 0; i < window.oulCount; i++) {
    if (window.mmm.offsetTop + 1 > window.oul[i].offsetTop) {
      window.oul[i].style.visibility = "hidden";
    }
  }
  if (window.g > window.gg) {
    window.setTimeout(podn, 1);
  } else {
    window.mmm.nextElementSibling.style.display = "none";
  }
}
.k52 {
  width: 330px;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  padding: 0 8px;
}

.k53,
.k55,
.k53_mini {
  width: 100%;
  height: auto;
  background: rgba(105, 201, 201, 1.00);
  box-shadow: 0 1px 9px rgb(0 0 0 / 30%), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
  border-radius: 5px;
  margin-top: 10px;
  cursor: pointer;
  z-index: 2;
}

.k55 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.k53_mini {
  width: 80%;
  margin-top: 8px;
  box-shadow: 0 1px 9px rgb(0 0 0 / 30%), -23px 0 20px -23px rgb(0 0 0 / 80%), 23px 0 20px -23px rgb(0 0 0 / 80%), 0 0 40px rgb(0 0 0 / 10%) inset;
}

.k54,
.k54_mini {
  display: flex;
  padding: 13px;
  color: white;
  font-size: 120%;
}

.k54_mini {
  padding: 10px;
  font-size: 90%;
}

.k56 {
  width: 1px;
  height: 70%;
  background-color: black;
}

.k57 {
  height: 40px;
  margin: 0 5px 0 15px;
}

.k58 {
  width: 100%;
  height: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.k59 {
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
}
<div class="k52">
  <div class="k53">
    <a href="notarial'no-zaverennyy-perevod.html" class="k54">Нотариальный перевод</a>
  </div>
  <div class="k55" onClick="predUslugiSl(this)">
    <a class="k54">Письменный перевод</a>
    <div class="k59">
      <div class="k56"></div>
      <img src="img/arrow.png" class="k57">
    </div>
  </div>
  <div class="k58">
    <div class="k53_mini">
      <a href="perevod-meditsinskikh-tekstov.html" class="k54_mini">Медицинский</a>
    </div>
    <div class="k53_mini">
      <a href="perevod-tekhnicheskoy-dokumentatsii.html" class="k54_mini">Технический</a>
    </div>
    <div class="k53_mini">
      <a href="perevod-yuridicheskoy-dokumentatsii.html" class="k54_mini">Юридический</a>
    </div>
    <div class="k53_mini">
      <a href="finansovo-ekonomicheskiy-perevod.html" class="k54_mini">Экономический</a>
    </div>
    <div class="k53_mini">
      <a href="perevod-literaturnykh-tekstov.html" class="k54_mini">Литературный</a>
    </div>
  </div>
  <div class="k55" onClick="predUslugiSl(this)">
    <a class="k54">Устный перевод</a>
    <div class="k59">
      <div class="k56"></div>
      <img src="img/arrow.png" class="k57">
    </div>
  </div>
  <div class="k58">
    <div class="k53_mini">
      <a href="ustnyy-posledovatel'nyy-perevod.html" class="k54_mini">Последовательный</a>
    </div>
    <div class="k53_mini">
      <a href="ustnyy-sinkhronnyy-perevod.html" class="k54_mini">Синхронный</a>
    </div>
  </div>
  <div class="k55" onClick="predUslugiSl(this)">
    <a class="k54">Перевод личных документов</a>
    <div class="k59">
      <div class="k56"></div>
      <img src="img/arrow.png" class="k57">
    </div>
  </div>
  <div class="k58">
    <div class="k53_mini">
      <a href="notarial'nyy-perevod-pasporta.html" class="k54_mini">Перевод паспорта</a>
    </div>
    <div class="k53_mini">
      <a href="notarial'nyy-perevod-svidetel'stva.html" class="k54_mini">Перевод свидетельства</a>
    </div>
    <div class="k53_mini">
      <a href="notarial'nyy-perevod-prav.html" class="k54_mini">Перевод прав</a>
    </div>
    <div class="k53_mini">
      <a href="notarial'nyy-perevod-pechati.html" class="k54_mini">Перевод печати</a>
    </div>
    <div class="k53_mini">
      <a href="notarial'nyy-perevod-trudovoy.html" class="k54_mini">Перевод трудовой</a>
    </div>
    <div class="k53_mini">
      <a href="notarial'nyy-perevod-spravki.html" class="k54_mini">Перевод справки</a>
    </div>
    <div class="k53_mini">
      <a href="notarial'nyy-perevod-doverennosti.html" class="k54_mini">Перевод доверенности</a>
    </div>
  </div>
</div>


Ответы (0 шт):