修复动画掉帧的问题,增加昼夜切换的过渡动画
This commit is contained in:
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;
|
||||
});
|
||||
|
||||
Reference in new issue
Block a user