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

Reorder the animations of post lists

Browse Source
This commit is contained in:
Mimi 2023-01-01 20:49:42 +08:00
parent e9cb704283
commit 0ed4632f34
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/css/_schemes/Gemini/index.styl
View File

@ -25,7 +25,7 @@
// ================================================== // ==================================================
// Post blocks. // Post blocks.
.main-inner { .main-inner {
.sub-menu, .post-block, .tabs-comment, .comments, .pagination { .sub-menu, .post-block, .tabs-comment, :not(.tab-pane) > .comments, .pagination {
gemini-block(); gemini-block();
} }
@ -35,7 +35,7 @@
} }
} }
.tabs-comment, .comments, .pagination { .tabs-comment, :not(.tab-pane) > .comments, .pagination {
gemini-block-not-first(); gemini-block-not-first();
} }
} }

20
source/js/motion.js
View File

@ -87,9 +87,9 @@ NexT.motion.middleWares = {
const sequence = []; const sequence = [];
const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition; const { post_block, post_header, post_body, coll_header } = CONFIG.motion.transition;
function animate(animation, selector) { function animate(animation, elements) {
if (!animation) return; if (!animation) return;
document.querySelectorAll(selector).forEach(targets => { elements.forEach(targets => {
sequence.push({ sequence.push({
targets, targets,
complete: () => targets.classList.add('animated', animation), complete: () => targets.classList.add('animated', animation),
@ -98,10 +98,18 @@ NexT.motion.middleWares = {
}); });
} }
animate(post_block, '.post-block, .pagination, .comments'); document.querySelectorAll('.post-block').forEach(targets => {
animate(coll_header, '.collection-header'); sequence.push({
animate(post_header, '.post-header'); targets,
animate(post_body, '.post-body'); complete: () => targets.classList.add('animated', post_block),
deltaT : '-=100'
});
animate(coll_header, targets.querySelectorAll('.collection-header'));
animate(post_header, targets.querySelectorAll('.post-header'));
animate(post_body, targets.querySelectorAll('.post-body'));
});
animate(post_block, document.querySelectorAll('.pagination, .comments'));
return sequence; return sequence;
}, },

4
source/js/utils.js
View File

@ -176,11 +176,11 @@ NexT.utils = {
tabContent.style.overflow = 'hidden'; tabContent.style.overflow = 'hidden';
tabContent.style.transition = 'height 1s'; tabContent.style.transition = 'height 1s';
// Comment system selection tab does not contain .active class. // Comment system selection tab does not contain .active class.
const activeTab = tabContent.querySelector('.active') || tabContent.firstChild; const activeTab = tabContent.querySelector('.active') || tabContent.firstElementChild;
// Hight might be `auto`. // Hight might be `auto`.
const prevHeight = parseInt(window.getComputedStyle(activeTab).height.replace('px', ''), 10) || 0; const prevHeight = parseInt(window.getComputedStyle(activeTab).height.replace('px', ''), 10) || 0;
const paddingTop = parseInt(window.getComputedStyle(activeTab).paddingTop.replace('px', ''), 10); const paddingTop = parseInt(window.getComputedStyle(activeTab).paddingTop.replace('px', ''), 10);
const marginBottom = parseInt(window.getComputedStyle(activeTab.firstChild).marginBottom.replace('px', ''), 10); const marginBottom = parseInt(window.getComputedStyle(activeTab.firstElementChild).marginBottom.replace('px', ''), 10);
tabContent.style.height = prevHeight + paddingTop + marginBottom + 'px'; tabContent.style.height = prevHeight + paddingTop + marginBottom + 'px';
// Add & Remove active class on `nav-tabs` & `tab-content`. // Add & Remove active class on `nav-tabs` & `tab-content`.
[...nav.children].forEach(target => { [...nav.children].forEach(target => {