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

Add transition animation for the height of tab-content when tab switches (#596)

Browse Source
This commit is contained in:
zhmou 2022-12-08 22:13:05 +08:00 committed by GitHub
parent 1997dd1f1a
commit 7c49d60389
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
source/js/utils.js
View File

@ -171,6 +171,14 @@ NexT.utils = {
// Prevent selected tab to select again.
if (element.classList.contains('active')) return;
const nav = element.parentNode;
// Get the height of `tab-pane` which is activated before, and set it as the height of `tab-content` with extra margin / paddings.
const tabContent = nav.nextElementSibling;
tabContent.style.overflow = 'hidden';
tabContent.style.transition = 'height 1s';
const prevHeight = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
const paddingTop = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).paddingTop.replace('px', ''), 10);
const marginBottom = parseInt(window.getComputedStyle(tabContent.querySelector('.active').firstChild).marginBottom.replace('px', ''), 10);
tabContent.style.height = prevHeight + paddingTop + marginBottom + 'px';
// Add & Remove active class on `nav-tabs` & `tab-content`.
[...nav.children].forEach(target => {
target.classList.toggle('active', target === element);
@ -184,6 +192,25 @@ NexT.utils = {
tActive.dispatchEvent(new Event('tabs:click', {
bubbles: true
}));
// Get the height of `tab-pane` which is activated now.
const hasScrollBar = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
const currHeight = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
// Reset the height of `tab-content` and see the animation.
tabContent.style.height = currHeight + paddingTop + marginBottom + 'px';
// Change the height of `tab-content` may cause scrollbar show / disappear, which may result in the change of the `tab-pane`'s height
setTimeout(() => {
if ((document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)) !== hasScrollBar) {
tabContent.style.transition = 'height 0.3s linear';
// After the animation, we need reset the height of `tab-content` again.
const currHeightAfterScrollBarChange = parseInt(window.getComputedStyle(tabContent.querySelector('.active')).height.replace('px', ''), 10);
tabContent.style.height = currHeightAfterScrollBarChange + paddingTop + marginBottom + 'px';
}
// Remove all the inline styles, and let the height be adaptive again.
setTimeout(() => {
tabContent.style.transition = '';
tabContent.style.height = '';
}, 250);
}, 1000);
if (!CONFIG.stickytabs) return;
const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
window.anime({