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 を使う必要がある
|
// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
|
||||||
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
|
// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
|
||||||
function transition() {
|
function transition() {
|
||||||
|
window.requestAnimationFrame(() => {
|
||||||
const parentRect = tabsEl.getBoundingClientRect();
|
const parentRect = tabsEl.getBoundingClientRect();
|
||||||
const rect = tabEl.getBoundingClientRect();
|
const rect = tabEl.getBoundingClientRect();
|
||||||
const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
|
const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
|
||||||
tabHighlightEl.style.width = rect.width + 'px';
|
tabHighlightEl.style.width = rect.width + 'px';
|
||||||
tabHighlightEl.style.left = left + 'px';
|
tabHighlightEl.style.left = left + 'px';
|
||||||
tabsEl?.scrollTo({left: left - 80, behavior: "smooth"});
|
tabsEl?.scrollTo({left: left - 80, behavior: "smooth"});
|
||||||
|
})
|
||||||
tabEl.removeEventListener("transitionend", transition);
|
tabEl.removeEventListener("transitionend", transition);
|
||||||
}
|
}
|
||||||
tabEl.addEventListener("transitionend", transition);
|
tabEl.addEventListener("transitionend", transition);
|
||||||
|
|
Loading…
Reference in a new issue