perf(post-tools): optimize post tools position when toggle toc

This commit is contained in:
XPoet 2022-10-20 14:37:32 +08:00
parent 58b132842b
commit d961331b06
3 changed files with 11 additions and 7 deletions

View File

@ -124,5 +124,4 @@
height 0 height 0
} }
} }
} }

View File

@ -137,7 +137,7 @@
top $header-height + $component-spacing-value top $header-height + $component-spacing-value
left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
opacity 0 opacity 0
transition-t("top, transform, opacity", "0, 0, 0.2", "0.2, 0.2, 0.2", "ease, ease, ease") transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")
.header-shrink & { .header-shrink & {
top $header-shrink-height + $component-spacing-value top $header-shrink-height + $component-spacing-value

View File

@ -29,6 +29,10 @@ function initToggleShowToc() {
this.postPageContainerDom.classList.remove('show-toc') this.postPageContainerDom.classList.remove('show-toc')
document.body.classList.remove('has-toc') document.body.classList.remove('has-toc')
} }
setTimeout(() => {
this.setPostToolsLeft()
}, 120)
}, },
hasToc(isOpen) { hasToc(isOpen) {
@ -37,17 +41,18 @@ function initToggleShowToc() {
this.handleToggleToc(isOpen) this.handleToggleToc(isOpen)
}, },
setPostToolsLeft() { setPostToolsLeft(mcw) {
const winWidth = window.innerWidth const mainContainerWidth = mcw
const mcWidth = this.mainContentDom.getBoundingClientRect().width.toFixed(0) ? mcw
: this.mainContentDom.getBoundingClientRect().width.toFixed(0)
let offsetX = 5 let offsetX = 5
if (winWidth <= 800) { if (window.innerWidth <= 800) {
offsetX = 3 offsetX = 3
} }
this.postToolsDom.style.opacity = `1` this.postToolsDom.style.opacity = `1`
this.postToolsDom.style.left = `calc((100vw - ${mcWidth}px) / 2 - ${offsetX}rem)` this.postToolsDom.style.left = `calc((100vw - ${mainContainerWidth}px) / 2 - ${offsetX}rem)`
}, },
initSetPostToolsLeft() { initSetPostToolsLeft() {