perf(post-tools): optimize post tools position when toggle toc
This commit is contained in:
parent
58b132842b
commit
d961331b06
|
@ -124,5 +124,4 @@
|
|||
height 0
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -137,7 +137,7 @@
|
|||
top $header-height + $component-spacing-value
|
||||
left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
|
||||
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 & {
|
||||
top $header-shrink-height + $component-spacing-value
|
||||
|
|
|
@ -29,6 +29,10 @@ function initToggleShowToc() {
|
|||
this.postPageContainerDom.classList.remove('show-toc')
|
||||
document.body.classList.remove('has-toc')
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.setPostToolsLeft()
|
||||
}, 120)
|
||||
},
|
||||
|
||||
hasToc(isOpen) {
|
||||
|
@ -37,17 +41,18 @@ function initToggleShowToc() {
|
|||
this.handleToggleToc(isOpen)
|
||||
},
|
||||
|
||||
setPostToolsLeft() {
|
||||
const winWidth = window.innerWidth
|
||||
const mcWidth = this.mainContentDom.getBoundingClientRect().width.toFixed(0)
|
||||
setPostToolsLeft(mcw) {
|
||||
const mainContainerWidth = mcw
|
||||
? mcw
|
||||
: this.mainContentDom.getBoundingClientRect().width.toFixed(0)
|
||||
let offsetX = 5
|
||||
|
||||
if (winWidth <= 800) {
|
||||
if (window.innerWidth <= 800) {
|
||||
offsetX = 3
|
||||
}
|
||||
|
||||
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() {
|
||||
|
|
Loading…
Reference in New Issue