github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use calc-size in .active > .nav-child

Browse Source
This commit is contained in:
Mimi 2024-11-22 01:55:19 +08:00
parent 183e89ae1e
commit 2041b233e4
2 changed files with 4 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
source/css/_common/outline/sidebar/sidebar-toc.styl
View File

@ -34,19 +34,17 @@ if (hexo-config('toc.enable')) {
.nav { .nav {
if (not hexo-config('toc.expand_all')) { if (not hexo-config('toc.expand_all')) {
.nav-child { .nav-child {
--height: 0;
height: 0; height: 0;
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
transition-property: height, opacity, visibility; transition-property: height, opacity;
transition: $transition-ease; transition: $transition-ease;
visibility: hidden;
} }
.active > .nav-child { .active > .nav-child {
height: var(--height, auto); height: auto;
height: calc-size(auto, size);
opacity: 1; opacity: 1;
visibility: unset;
} }
} }

18
source/js/utils.js
View File

@ -352,24 +352,16 @@ NexT.utils = {
const target = navItemList[index]; const target = navItemList[index];
if (!target || target.classList.contains('active-current')) return; if (!target || target.classList.contains('active-current')) return;
const singleHeight = navItemList[navItemList.length - 1].offsetHeight;
nav.querySelectorAll('.active').forEach(navItem => { nav.querySelectorAll('.active').forEach(navItem => {
navItem.classList.remove('active', 'active-current'); navItem.classList.remove('active', 'active-current');
}); });
target.classList.add('active', 'active-current'); target.classList.add('active', 'active-current');
let activateEle = target.querySelector('.nav-child') || target.parentElement; let activateEle = target.querySelector('.nav-child') || target.parentElement;
let navChildHeight = 0;
while (nav.contains(activateEle)) { while (nav.contains(activateEle)) {
if (activateEle.classList.contains('nav-item')) { if (activateEle.classList.contains('nav-item')) {
activateEle.classList.add('active'); activateEle.classList.add('active');
} else { // .nav-child or .nav
// scrollHeight isn't reliable for transitioning child items.
// The last nav-item in a list has a margin-bottom of 5px.
navChildHeight += (singleHeight * activateEle.childElementCount) + 5;
activateEle.style.setProperty('--height', `${navChildHeight}px`);
} }
activateEle = activateEle.parentElement; activateEle = activateEle.parentElement;
} }
@ -408,16 +400,8 @@ NexT.utils = {
const tocPanel = panelContainer.firstElementChild; const tocPanel = panelContainer.firstElementChild;
const overviewPanel = panelContainer.lastElementChild; const overviewPanel = panelContainer.lastElementChild;
let postTOCHeight = tocPanel.scrollHeight;
// For TOC activation, try to use the animated TOC height
if (index === 0) {
const nav = tocPanel.querySelector('.nav');
if (nav) {
postTOCHeight = parseInt(nav.style.getPropertyValue('--height'), 10);
}
}
const panelHeights = [ const panelHeights = [
postTOCHeight, tocPanel.scrollHeight,
overviewPanel.scrollHeight overviewPanel.scrollHeight
]; ];
panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`); panelContainer.style.setProperty('--inactive-panel-height', `${panelHeights[1 - index]}px`);