diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue index 9e8e243019..f59ebb4b6b 100644 --- a/packages/client/src/components/global/MkPageHeader.vue +++ b/packages/client/src/components/global/MkPageHeader.vue @@ -19,7 +19,7 @@
@@ -38,8 +38,6 @@ import tinycolor from 'tinycolor2'; import { popupMenu } from '@/os'; import { scrollToTop } from '@/scripts/scroll'; import { globalEvents } from '@/events'; -import { deviceKind } from '@/scripts/device-kind'; -import { isTouchUsing } from '@/scripts/touch'; import { injectPageMetadata } from '@/scripts/page-metadata'; import { $i, openAccountMenu as openAccountMenu_ } from '@/account'; @@ -145,25 +143,21 @@ let ro: ResizeObserver | null; onMounted(() => { calcBg(); globalEvents.on('themeChanged', calcBg); - + watch(() => [props.tab, props.tabs], () => { nextTick(() => { const tabEl = tabRefs[props.tab]; if (tabEl && tabHighlightEl) { // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 - function transition() { - 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); + setTimeout(() => { + 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 - 60, behavior: "smooth"}); + }, 200); } }); }, { @@ -234,14 +228,6 @@ onUnmounted(() => { display: inline-block; min-width: 20%; } - > .tab { - &:not(.active) > .title { - font-size: 0; - opacity: 0; - margin-inline: 0; - transition: font-size .2s, opacity .1s; - } - } } } @@ -389,6 +375,12 @@ onUnmounted(() => { > .title { transition: font-size .2s, opacity .2s .15s; } + &:not(.active) > .title { + font-size: 0; + opacity: 0; + margin-inline: 0; + transition: font-size .2s, opacity .1s; + } } > .highlight {