feat: 移除所有文章加载动画相关代码
- 移除pjax:afterGetContainers中的加载动画逻辑 - 移除pjax:beforeReplace中的动画清理代码 - 删除CSS中的loading-css-animation样式 - 删除CSS中的loading-dot动画样式 - 删除CSS中的post-pjax-loading相关样式 - 删除CSS中的post-list-pjax-loading相关样式 - 删除loading-animation关键帧动画
This commit is contained in:
@@ -2821,54 +2821,6 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
NProgress.start();
|
NProgress.start();
|
||||||
pjaxLoading = true;
|
pjaxLoading = true;
|
||||||
}).on('pjax:afterGetContainers', function(e, f, g) {
|
}).on('pjax:afterGetContainers', function(e, f, g) {
|
||||||
if (g.is("#main article.post-preview a.post-title")){
|
|
||||||
let $card = $(g.parents("article.post-preview")[0]);
|
|
||||||
let waterflowOn = false;
|
|
||||||
if ($("#main").hasClass("waterflow")){
|
|
||||||
waterflowOn = true;
|
|
||||||
$card.css("transition", "all .5s ease");
|
|
||||||
}
|
|
||||||
$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");
|
|
||||||
$("#main").addClass("post-list-pjax-loading");
|
|
||||||
|
|
||||||
// 隐藏其他卡片 - 先禁用transition,设置opacity,然后恢复
|
|
||||||
$(".post-preview").not($card).each(function() {
|
|
||||||
let $this = $(this);
|
|
||||||
let originalTransition = $this.css("transition");
|
|
||||||
$this.css("transition", "none");
|
|
||||||
$this.css("opacity", "0");
|
|
||||||
$this.css("pointer-events", "none");
|
|
||||||
// 强制浏览器重绘
|
|
||||||
$this[0].offsetHeight;
|
|
||||||
$this.css("transition", originalTransition);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 隐藏footer
|
|
||||||
$("#footer").css({
|
|
||||||
"opacity": "0",
|
|
||||||
"pointer-events": "none"
|
|
||||||
});
|
|
||||||
|
|
||||||
// 让被点击的卡片居中
|
|
||||||
$card.css({
|
|
||||||
"margin-left": "auto",
|
|
||||||
"margin-right": "auto"
|
|
||||||
});
|
|
||||||
|
|
||||||
let offsetTop = $($card).offset().top - $("#main").offset().top;
|
|
||||||
if ($("html").hasClass("is-home") && $("html").hasClass("banner-as-cover")){
|
|
||||||
offsetTop = $($card).offset().top - window.outerHeight * 0.418;
|
|
||||||
}
|
|
||||||
$card.css("transform" , "translateY(-" + offsetTop + "px)");
|
|
||||||
if (waterflowOn){
|
|
||||||
$card.css("left", "10px");
|
|
||||||
$card.css("width", "calc(100% - 20px)");
|
|
||||||
}
|
|
||||||
$("body,html").animate({
|
|
||||||
scrollTop: 0
|
|
||||||
}, 450);
|
|
||||||
}
|
|
||||||
pjaxScrollTop = 0;
|
pjaxScrollTop = 0;
|
||||||
if ($("html").hasClass("banner-as-cover")){
|
if ($("html").hasClass("banner-as-cover")){
|
||||||
if (g.is(".page-link")){
|
if (g.is(".page-link")){
|
||||||
@@ -2881,30 +2833,6 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
// 清理旧页面的资源
|
// 清理旧页面的资源
|
||||||
cleanupPjaxResources();
|
cleanupPjaxResources();
|
||||||
|
|
||||||
// 清理文章列表的 PJAX 加载状态
|
|
||||||
$(".post-preview.post-pjax-loading").removeClass("post-pjax-loading").css({
|
|
||||||
"transform": "",
|
|
||||||
"transition": "",
|
|
||||||
"left": "",
|
|
||||||
"width": "",
|
|
||||||
"margin-left": "",
|
|
||||||
"margin-right": ""
|
|
||||||
});
|
|
||||||
$(".post-preview .loading-css-animation").remove();
|
|
||||||
$("#main").removeClass("post-list-pjax-loading");
|
|
||||||
|
|
||||||
// 恢复所有卡片的显示状态
|
|
||||||
$(".post-preview").css({
|
|
||||||
"opacity": "",
|
|
||||||
"pointer-events": ""
|
|
||||||
});
|
|
||||||
|
|
||||||
// 恢复footer
|
|
||||||
$("#footer").css({
|
|
||||||
"opacity": "",
|
|
||||||
"pointer-events": ""
|
|
||||||
});
|
|
||||||
|
|
||||||
// 更新 UI 状态
|
// 更新 UI 状态
|
||||||
if ($("#post_comment", dom[0]).length > 0){
|
if ($("#post_comment", dom[0]).length > 0){
|
||||||
$("#fabtn_go_to_comment").removeClass("d-none");
|
$("#fabtn_go_to_comment").removeClass("d-none");
|
||||||
|
|||||||
137
style.css
137
style.css
@@ -3862,33 +3862,6 @@ html.filter-grayscale {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-preview .loading-css-animation {
|
|
||||||
|
|
||||||
padding-top: 20px;
|
|
||||||
|
|
||||||
padding-bottom: 10px;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-preview.post-pjax-loading {
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 10;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main.post-list-pjax-loading .post-preview {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main.post-list-pjax-loading .post-preview.post-pjax-loading {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-title {
|
.post-title {
|
||||||
|
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
@@ -4232,14 +4205,6 @@ article.post-preview-layout-2 .post-meta {
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
article.post-preview-layout-2 .loading-css-animation {
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
bottom: -8px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 文章预览样式 3 */
|
/* 文章预览样式 3 */
|
||||||
|
|
||||||
article.post-preview-layout-3 .post-header {
|
article.post-preview-layout-3 .post-header {
|
||||||
@@ -8938,12 +8903,6 @@ html[lang] {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-list-pjax-loading .shuoshuo-preview-container {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shuoshuo-content.shuoshuo-folded {
|
.shuoshuo-content.shuoshuo-folded {
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -9146,102 +9105,6 @@ html[lang] {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Loading Dot*/
|
|
||||||
|
|
||||||
.loading-css-animation {
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot {
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
background: var(--themecolor);
|
|
||||||
|
|
||||||
height: 6px;
|
|
||||||
|
|
||||||
width: 6px;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
transform: translateX(-300px);
|
|
||||||
|
|
||||||
animation: loading-animation 4s infinite ease;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-1 {
|
|
||||||
|
|
||||||
animation-delay: 0.8s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-2 {
|
|
||||||
|
|
||||||
animation-delay: 0.7s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-3 {
|
|
||||||
|
|
||||||
animation-delay: 0.6s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-4 {
|
|
||||||
|
|
||||||
animation-delay: 0.5s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-5 {
|
|
||||||
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-6 {
|
|
||||||
|
|
||||||
animation-delay: 0.3s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-7 {
|
|
||||||
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-dot-8 {
|
|
||||||
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes loading-animation {
|
|
||||||
|
|
||||||
40% {
|
|
||||||
|
|
||||||
transform: translateX(0);
|
|
||||||
|
|
||||||
opacity: 0.8;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
|
|
||||||
transform: translateX(300px);
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Loading Spinner*/
|
/*Loading Spinner*/
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
|
|||||||
Reference in New Issue
Block a user