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

Refactor site-nav animation: drop Velocity

Browse Source
This commit is contained in:
Mimi 2020-07-02 11:36:06 +08:00
parent 9781cf0181
commit 659347cc1e
2 changed files with 41 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
/* global NexT, CONFIG, Velocity */ /* global NexT, CONFIG */
NexT.boot = {}; NexT.boot = {};
@ -12,18 +12,35 @@ NexT.boot.registerEvents = function() {
event.currentTarget.classList.toggle('toggle-close'); event.currentTarget.classList.toggle('toggle-close');
const siteNav = document.querySelector('.site-nav'); const siteNav = document.querySelector('.site-nav');
if (!siteNav) return; if (!siteNav) return;
const animateAction = siteNav.classList.contains('site-nav-on') ? 'slideUp' : 'slideDown'; const animateAction = siteNav.classList.contains('site-nav-on');
const height = NexT.utils.getComputedStyle(siteNav);
if (typeof Velocity === 'function') { siteNav.style.height = animateAction ? height : 0;
Velocity(siteNav, animateAction, { const toggle = () => siteNav.classList.toggle('site-nav-on');
duration: 200, const begin = () => {
complete: function() { siteNav.style.overflow = 'hidden';
siteNav.classList.toggle('site-nav-on'); };
} const complete = () => {
}); siteNav.style.overflow = '';
} else { siteNav.style.height = '';
siteNav.classList.toggle('site-nav-on'); };
} window.anime(Object.assign({
targets : siteNav,
duration: 200,
height : animateAction ? [height, 0] : [0, height],
easing : 'linear'
}, animateAction ? {
begin,
complete: () => {
complete();
toggle();
}
} : {
begin: () => {
begin();
toggle();
},
complete
}));
}); });
const TAB_ANIMATE_DURATION = 200; const TAB_ANIMATE_DURATION = 200;

11
source/js/utils.js
View File

@ -281,6 +281,17 @@ NexT.utils = {
return isFirefoxWithPDFJS || (supportsPdfMimeType && !isIOS); return isFirefoxWithPDFJS || (supportsPdfMimeType && !isIOS);
}, },
getComputedStyle: function(element) {
const clone = element.cloneNode(true);
clone.style.position = 'absolute';
clone.style.visibility = 'hidden';
clone.style.display = 'block';
element.parentNode.appendChild(clone);
const height = clone.clientHeight;
element.parentNode.removeChild(clone);
return height;
},
/** /**
* Init Sidebar & TOC inner dimensions on all pages and for all schemes. * Init Sidebar & TOC inner dimensions on all pages and for all schemes.
* Need for Sidebar/TOC inner scrolling if content taller then viewport. * Need for Sidebar/TOC inner scrolling if content taller then viewport.