Лагает анимация на телефоне 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>