修复动画掉帧的问题,增加昼夜切换的过渡动画

This commit is contained in:
zqlit committed 2026-05-24 14:00:12 +08:00
1 parent 94471c4c89
commit 624d0bda0f
7 files changed
+246 -131

No files matched your search

@@ -63,17 +63,21 @@ window.initInfiniteScroll = function() {
// 1. Get new posts
const newPosts = doc.querySelectorAll(`${containerSelector} ${itemSelector}`);
// 2. Append posts
// 2. Append posts with batch layout read/write to avoid thrashing
if (newPosts.length > 0) {
newPosts.forEach(post => {
// Remove UIkit scrollspy attributes to prevent interference and use manual animation
// Phase 1: append all and set initial opacity
newPosts.forEach(function(post) {
post.removeAttribute('uk-scrollspy-class');
post.style.opacity = 0;
container.appendChild(post);
// Trigger reflow
void post.offsetWidth;
});
// Phase 2: force single layout read for all new posts
var postArr = Array.prototype.slice.call(newPosts);
postArr.forEach(function(post) { void post.offsetWidth; });
// Phase 3: batch animate in
postArr.forEach(function(post) {
post.style.transition = 'opacity 0.5s ease';
post.style.opacity = 1;
});