From d8512d54857edfbae0c7295c9448debeb4adc182 Mon Sep 17 00:00:00 2001 From: Free Date: Sun, 12 Feb 2023 18:42:21 +0000 Subject: [PATCH] fix navbar hover thingy (#9616) Co-authored-by: Freeplay Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9616 Co-authored-by: Free Co-committed-by: Free --- packages/client/src/components/global/MkPageHeader.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue index f37b2f43f..28db62c11 100644 --- a/packages/client/src/components/global/MkPageHeader.vue +++ b/packages/client/src/components/global/MkPageHeader.vue @@ -152,14 +152,16 @@ onMounted(() => { if (tabEl && tabHighlightEl) { // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 - tabEl.addEventListener("transitionend", () => { + 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"}); - }) + tabEl.removeEventListener("transitionend", transition); + } + tabEl.addEventListener("transitionend", transition); } }); }, {