fix: 修复开启进入文章动画时文章加载不正常的问题
- 在 pjax:beforeReplace 事件中清理文章列表的 PJAX 加载状态 - 移除 post-preview 元素的 loading 动画和 transform 样式 - 清理 post-list-pjax-loading 类,避免影响新页面 - 优化 post-full 动画,添加 transform-origin 确保动画流畅 - 通过 :not(.no-animation) 选择器支持禁用动画的场景
This commit is contained in:
@@ -2775,6 +2775,16 @@ $(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": ""
|
||||||
|
});
|
||||||
|
$(".post-preview .loading-css-animation").remove();
|
||||||
|
$("#main").removeClass("post-list-pjax-loading");
|
||||||
|
|
||||||
// 更新 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");
|
||||||
|
|||||||
@@ -16308,7 +16308,8 @@ article.post.card .post-thumbnail {
|
|||||||
#primary.pjax-loading { opacity: 0.6; transform: translateY(10px); pointer-events: none; }
|
#primary.pjax-loading { opacity: 0.6; transform: translateY(10px); pointer-events: none; }
|
||||||
#primary { transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); }
|
#primary { transition: opacity var(--animation-normal) var(--ease-standard), transform var(--animation-normal) var(--ease-standard); }
|
||||||
@keyframes modernContentFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
@keyframes modernContentFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
article.post.post-full { animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate); }
|
article.post.post-full:not(.no-animation) { animation: modernContentFadeIn var(--animation-slow) var(--ease-emphasized-decelerate); }
|
||||||
|
article.post.post-full { transform-origin: center top; }
|
||||||
|
|
||||||
#float_action_buttons { transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); }
|
#float_action_buttons { transition: transform var(--animation-normal) var(--ease-back), opacity var(--animation-normal) var(--ease-standard); }
|
||||||
#float_action_buttons .fabtn { transition: background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), opacity var(--animation-normal) var(--ease-standard); }
|
#float_action_buttons .fabtn { transition: background var(--animation-fast) var(--ease-standard), box-shadow var(--animation-fast) var(--ease-standard), opacity var(--animation-normal) var(--ease-standard); }
|
||||||
|
|||||||
Reference in New Issue
Block a user