fix: 移除important并添加详细调试日志
- 移除CSS中的!important,避免叠屎山 - 添加详细的console.log调试信息 - 输出每个卡片的opacity值和loading状态 - 方便通过浏览器控制台定位问题
This commit is contained in:
@@ -2831,9 +2831,22 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
$card.append("<div class='loading-css-animation'><div class='loading-dot loading-dot-1' ></div><div class='loading-dot loading-dot-2' ></div><div class='loading-dot loading-dot-3' ></div><div class='loading-dot loading-dot-4' ></div><div class='loading-dot loading-dot-5' ></div><div class='loading-dot loading-dot-6' ></div><div class='loading-dot loading-dot-7' ></div><div class='loading-dot loading-dot-8' ></div></div></div>");
|
$card.append("<div class='loading-css-animation'><div class='loading-dot loading-dot-1' ></div><div class='loading-dot loading-dot-2' ></div><div class='loading-dot loading-dot-3' ></div><div class='loading-dot loading-dot-4' ></div><div class='loading-dot loading-dot-5' ></div><div class='loading-dot loading-dot-6' ></div><div class='loading-dot loading-dot-7' ></div><div class='loading-dot loading-dot-8' ></div></div></div>");
|
||||||
$card.addClass("post-pjax-loading");
|
$card.addClass("post-pjax-loading");
|
||||||
$("#main").addClass("post-list-pjax-loading");
|
$("#main").addClass("post-list-pjax-loading");
|
||||||
console.log("Added post-list-pjax-loading class to #main");
|
|
||||||
console.log("Total .post-preview elements:", $(".post-preview").length);
|
// 调试信息
|
||||||
console.log("Hidden .post-preview elements:", $("#main.post-list-pjax-loading .post-preview").length);
|
console.log("=== 文章加载动画调试 ===");
|
||||||
|
console.log("点击的卡片:", $card[0]);
|
||||||
|
console.log("#main 是否有 post-list-pjax-loading 类:", $("#main").hasClass("post-list-pjax-loading"));
|
||||||
|
console.log("页面中 .post-preview 总数:", $(".post-preview").length);
|
||||||
|
console.log("应该隐藏的 .post-preview 数量:", $("#main.post-list-pjax-loading .post-preview").length);
|
||||||
|
console.log("被点击的卡片是否有 post-pjax-loading 类:", $card.hasClass("post-pjax-loading"));
|
||||||
|
|
||||||
|
// 检查CSS是否生效
|
||||||
|
$(".post-preview").each(function(index) {
|
||||||
|
let opacity = $(this).css("opacity");
|
||||||
|
let hasLoadingClass = $(this).hasClass("post-pjax-loading");
|
||||||
|
console.log(`卡片 ${index}: opacity=${opacity}, hasLoadingClass=${hasLoadingClass}`);
|
||||||
|
});
|
||||||
|
|
||||||
let offsetTop = $($card).offset().top - $("#main").offset().top;
|
let offsetTop = $($card).offset().top - $("#main").offset().top;
|
||||||
if ($("html").hasClass("is-home") && $("html").hasClass("banner-as-cover")){
|
if ($("html").hasClass("is-home") && $("html").hasClass("banner-as-cover")){
|
||||||
offsetTop = $($card).offset().top - window.outerHeight * 0.418;
|
offsetTop = $($card).offset().top - window.outerHeight * 0.418;
|
||||||
|
|||||||
12
style.css
12
style.css
@@ -3873,20 +3873,20 @@ html.filter-grayscale {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.post-preview.post-pjax-loading {
|
.post-preview.post-pjax-loading {
|
||||||
opacity: 1 !important;
|
opacity: 1;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main.post-list-pjax-loading .post-preview {
|
#main.post-list-pjax-loading .post-preview {
|
||||||
opacity: 0 !important;
|
opacity: 0;
|
||||||
pointer-events: none !important;
|
pointer-events: none;
|
||||||
transition: opacity 0.3s ease !important;
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main.post-list-pjax-loading .post-preview.post-pjax-loading {
|
#main.post-list-pjax-loading .post-preview.post-pjax-loading {
|
||||||
opacity: 1 !important;
|
opacity: 1;
|
||||||
pointer-events: auto !important;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-title {
|
.post-title {
|
||||||
|
|||||||
Reference in New Issue
Block a user