Wechseln Sie die Breite und Position meines DIV -Elements mit JavaScript und einem Übergangsstil werden sehr verzögert ⇐ CSS

[Guest]

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>
Ich habe Ereignishörer, dass beim Klicken einer Schaltfläche einige HTML geändert, sie rendert und die Breite und Position eines Selektorbackgrounds ändert, um anzuzeigen, welche Schaltfläche "ausgewählt" ist. Es funktioniert für eine Weile wie beabsichtigt, aber nach 10+ klickt die Animation nach, und es wird fehlerhafter. < /P>
Ich habe versucht Der Breitstil ändert sich einzeln, um festzustellen, ob einer von ihnen die Verzögerung verursachte (beide verursachten Verzögerungen nach einiger Zeit). Ich denke, es hat etwas damit zu tun, die Breite und/oder das Übersetzen zu ändern, denn selbst wenn ich den Übergangszeitstil entferne, verursacht es nach einiger Zeit immer noch Verzögerungen. Hilfe wird sehr geschätzt!