Изменение ширины и позиции моего элемента Div с использованием JavaScript, и стиль перехода становится очень отсталым ⇐ Javascript

[Anonymous]

monthlyButton.addEventListener('click', () => {
if (planTerm === 1) {
basicPrice = prices.monthly.basic;
essentialsPrice = prices.monthly.essentials;
premiumPrice = prices.monthly.premium;
elitePrice = prices.monthly.elite;
planTerm = 12;

renderPlanContainers();

document.querySelectorAll('.plan-subtitle-bill').forEach((element) => {
element.classList.add('subtitle-bill-hidden');
});

selectorBackground.style.transform = 'translateX(0%)';
selectorBackground.style.width = '7rem';
}
});

yearlyButton.addEventListener('click', () => {
if (planTerm === 12) {
basicPrice = prices.yearly.basic;
essentialsPrice = prices.yearly.essentials;
premiumPrice = prices.yearly.premium;
elitePrice = prices.yearly.elite;
planTerm = 1;

renderPlanContainers();

document.querySelectorAll('.plan-subtitle-bill').forEach((element) => {
element.classList.remove('subtitle-bill-hidden');
});

selectorBackground.style.transform = 'translateX(46%)';
selectorBackground.style.width = '15rem';
}
});
< /code>
У меня есть слушатели событий, что, когда кнопка нажимается, она меняет некоторый HTML, отменяет его и изменяет ширину и положение выборочной площади, чтобы показать, какая кнопка «выбрана». Это работает, как предназначено некоторое время, но после 10+ щелчков взад -вперед анимация начинает отставать, и она становится более сбои. Стиль ширины меняется индивидуально, чтобы увидеть, вызывает ли один из них задержка (оба вызвали задержку через некоторое время). Я думаю, что это как -то связано с изменением ширины и/или перевода, потому что даже если я удаляю стиль времени перехода, это все равно вызывает задержку через некоторое время. Помощь очень ценится!

Подробнее здесь: https://stackoverflow.com/questions/794 ... transition