tab performance (#9621)
Co-authored-by: Freeplay <Freeplay@duck.com> Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9621 Co-authored-by: Free <freeplay@duck.com> Co-committed-by: Free <freeplay@duck.com>
This commit is contained in:
parent
9046b76536
commit
3185512753
1 changed files with 8 additions and 6 deletions
|
@ -153,12 +153,14 @@ onMounted(() => {
|
|||
// 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);
|
||||
|
|
Loading…
Reference in a new issue