Merge branch 'develop' of codeberg.org:calckey/calckey into develop
This commit is contained in:
commit
1a842703b4
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() {
|
||||
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);
|
||||
|
|
Loading…
Reference in a new issue