github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +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.
.main-inner {
.sub-menu, .post-block, .tabs-comment, .comments, .pagination {
.sub-menu, .post-block, .tabs-comment, :not(.tab-pane) > .comments, .pagination {
gemini-block();
}
@ -35,7 +35,7 @@
}
}
.tabs-comment, .comments, .pagination {
.tabs-comment, :not(.tab-pane) > .comments, .pagination {
gemini-block-not-first();
}
}

20
source/js/motion.js
View File

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

4
source/js/utils.js
View File

@ -176,11 +176,11 @@ NexT.utils = {
tabContent.style.overflow = 'hidden';
tabContent.style.transition = 'height 1s';
// 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`.
const prevHeight = parseInt(window.getComputedStyle(activeTab).height.replace('px', ''), 10) || 0;
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';
// Add & Remove active class on `nav-tabs` & `tab-content`.
[...nav.children].forEach(target => {