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

Optimize sidebar-panel animation

Browse Source
This commit is contained in:
Mimi 2020-07-12 20:59:22 +08:00
parent dca900aa7a
commit 1b00414987
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
source/js/next-boot.js
View File

@ -43,7 +43,7 @@ NexT.boot.registerEvents = function() {
})); }));
}); });
const TAB_ANIMATE_DURATION = 200; const duration = 200;
document.querySelectorAll('.sidebar-nav li').forEach((element, index) => { document.querySelectorAll('.sidebar-nav li').forEach((element, index) => {
element.addEventListener('click', event => { element.addEventListener('click', event => {
const item = event.currentTarget; const item = event.currentTarget;
@ -53,20 +53,21 @@ NexT.boot.registerEvents = function() {
const activeClassName = ['sidebar-toc-active', 'sidebar-overview-active']; const activeClassName = ['sidebar-toc-active', 'sidebar-overview-active'];
window.anime({ window.anime({
duration,
targets : panel[1 - index], targets : panel[1 - index],
duration: TAB_ANIMATE_DURATION,
easing : 'linear', easing : 'linear',
opacity : 0, opacity : 0,
translateY: [0, -20],
complete : () => { complete : () => {
// Prevent adding TOC to Overview if Overview was selected when close & open sidebar. // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
sidebar.classList.remove(activeClassName[1 - index]); sidebar.classList.remove(activeClassName[1 - index]);
panel[index].style.opacity = 0;
sidebar.classList.add(activeClassName[index]); sidebar.classList.add(activeClassName[index]);
window.anime({ window.anime({
duration,
targets : panel[index], targets : panel[index],
duration: TAB_ANIMATE_DURATION,
easing : 'linear', easing : 'linear',
opacity : 1 opacity : [0, 1],
translateY: [-20, 0],
}); });
} }
}); });
@ -88,7 +89,7 @@ NexT.boot.refresh = function() {
/** /**
* Register JS handlers by condition option. * Register JS handlers by condition option.
* Need to add config option in Front-End at 'layout/_partials/head.njk' file. * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.
*/ */
CONFIG.prism && window.Prism.highlightAll(); CONFIG.prism && window.Prism.highlightAll();
CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox(); CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox();