From d9b85d9844c0fcb708fe52dc4b4810d26c2b1bff Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 12 Feb 2023 22:49:38 +0000 Subject: [PATCH] tab performance (#9621) Co-authored-by: Freeplay Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9621 Co-authored-by: Free Co-committed-by: Free --- .../client/src/components/global/MkPageHeader.vue | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue index 28db62c11..9e8e24301 100644 --- a/packages/client/src/components/global/MkPageHeader.vue +++ b/packages/client/src/components/global/MkPageHeader.vue @@ -153,12 +153,14 @@ onMounted(() => { // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 function transition() { - const parentRect = tabsEl.getBoundingClientRect(); - const rect = tabEl.getBoundingClientRect(); - const left = (rect.left - parentRect.left + tabsEl?.scrollLeft); - tabHighlightEl.style.width = rect.width + 'px'; - tabHighlightEl.style.left = left + 'px'; - tabsEl?.scrollTo({left: left - 80, behavior: "smooth"}); + window.requestAnimationFrame(() => { + const parentRect = tabsEl.getBoundingClientRect(); + const rect = tabEl.getBoundingClientRect(); + const left = (rect.left - parentRect.left + tabsEl?.scrollLeft); + tabHighlightEl.style.width = rect.width + 'px'; + tabHighlightEl.style.left = left + 'px'; + tabsEl?.scrollTo({left: left - 80, behavior: "smooth"}); + }) tabEl.removeEventListener("transitionend", transition); } tabEl.addEventListener("transitionend", transition);