fix: 移除important并通过禁用transition解决问题
- 找到根本原因:post-preview的transition: all导致opacity被动画恢复 - 解决方案:临时禁用transition,设置opacity,然后恢复 - 添加footer隐藏功能 - 让被点击的卡片居中显示 - 清理时恢复footer和卡片位置
This commit is contained in:
@@ -2832,9 +2832,28 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
$card.addClass("post-pjax-loading");
|
$card.addClass("post-pjax-loading");
|
||||||
$("#main").addClass("post-list-pjax-loading");
|
$("#main").addClass("post-list-pjax-loading");
|
||||||
|
|
||||||
// 强制隐藏其他卡片 - 使用attr设置style以添加!important
|
// 隐藏其他卡片 - 先禁用transition,设置opacity,然后恢复
|
||||||
$(".post-preview").not($card).each(function() {
|
$(".post-preview").not($card).each(function() {
|
||||||
$(this).attr('style', ($(this).attr('style') || '') + ' opacity: 0 !important; pointer-events: none !important;');
|
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;
|
let offsetTop = $($card).offset().top - $("#main").offset().top;
|
||||||
@@ -2867,11 +2886,19 @@ $(document).pjax("a[href]:not([no-pjax]):not(.no-pjax):not([target='_blank']):no
|
|||||||
"transform": "",
|
"transform": "",
|
||||||
"transition": "",
|
"transition": "",
|
||||||
"left": "",
|
"left": "",
|
||||||
"width": ""
|
"width": "",
|
||||||
|
"margin-left": "",
|
||||||
|
"margin-right": ""
|
||||||
});
|
});
|
||||||
$(".post-preview .loading-css-animation").remove();
|
$(".post-preview .loading-css-animation").remove();
|
||||||
$("#main").removeClass("post-list-pjax-loading");
|
$("#main").removeClass("post-list-pjax-loading");
|
||||||
|
|
||||||
|
// 恢复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");
|
||||||
|
|||||||
Reference in New Issue
Block a user