PJAX 瞬间切换优化（彻底解决闪烁问题）

2026/9/13大约 7 分钟

PJAX 瞬间切换优化（彻底解决闪烁问题）

🐛 问题描述

现象

Mode2大图问题：PJAX切换到首页时，全屏大图先显示mode1样式，再扩张为全屏
双重闪烁：有的页面点击切换时会闪烁两下
视觉不美观：整体切换体验不如预期

根本原因

问题1：多重动画叠加

PJAX淡出动画（150ms）
    ↓
DOM更新
    ↓
PJAX淡入动画（250ms）← 这里开始闪烁
    ↓
Mode2 CSS transition（800ms）← 又一次闪烁
    ↓
页面内容动画

冲突：

PJAX的淡入淡出动画
Mode2大图的CSS transition
页面内容的初始化动画
三重动画叠加，造成视觉混乱

问题2：CSS transition 无法禁用

之前尝试用style.transition = 'none'禁用，但：

.home-big-image-mode2 {
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

这个CSS规则会立即覆盖inline style，导致禁用失败。

问题3：动画时机不同步

PJAX动画：0-400ms
大图初始化：在淡入期间
CSS应用：异步，不确定
结果：用户看到"中间态"

✅ 新的解决方案

核心思路

彻底移除PJAX的淡入淡出动画，改为瞬间切换。

为什么这样做？

Butterfly主题的真相
- Butterfly主题的PJAX切换没有淡入淡出动画
- 它是瞬间替换内容
- 流畅感来自于页面内容自己的动画，而非PJAX的动画
动画的真正来源
- 卡片加载动画
- 图片渐进加载
- 滚动触发动画
- 组件初始化动画
- 这些才是"丝滑"的来源
PJAX应该做什么
- 快速加载新页面
- 瞬间更新DOM
- 让页面内容自己处理动画
- 不要画蛇添足

🔧 实现方案

1. 简化loadPage函数

文件：themes/demius/assets/js/_simple-pjax.js

async function loadPage(url) {
  // 显示加载指示器
  showLoading();
  
  try {
    // 加载新页面
    const response = await fetch(url);
    const html = await response.text();
    const doc = parser.parseFromString(html, 'text/html');
    
    // 更新标题
    document.title = doc.title;
    
    // 瞬间替换内容（无动画）
    mainContent.innerHTML = newMainContent.innerHTML;
    rightSidebar.innerHTML = newRightSidebar.innerHTML;
    
    // 更新URL
    history.pushState({ pjax: true }, '', url);
    
    // 瞬间滚动到顶部
    window.scrollTo({ top: 0, behavior: 'instant' });
    
    // 重新初始化页面功能
    reinitializePage();
    
  } finally {
    hideLoading();
  }
}

关键变化：

❌ 移除淡出动画（150ms等待）
❌ 移除淡入动画（pjax-fade-in类）
❌ 移除过渡状态（pjax-transitioning）
✅ 直接替换DOM
✅ 瞬间滚动到顶部

2. 精简CSS样式

文件：themes/demius/assets/css/_pjax.css

/* 只保留进度条 */
#simple-pjax-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4fc3f7, #29b6f6, #03a9f4);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}

/* 加载中禁用交互 */
body.pjax-loading .site-main {
  pointer-events: none;
}

移除的内容：

❌ .pjax-fade-in 动画
❌ .pjax-fade-out 动画
❌ .pjax-transitioning 状态
❌ will-change 优化
❌ 所有过渡效果

📊 优化效果对比

旧方案（有闪烁）

用户点击链接
    ↓
显示进度条
    ↓
淡出旧内容（150ms）← 第一次闪烁
    ↓
加载新页面
    ↓
更新DOM
    ↓
淡入新内容（250ms）← 第二次闪烁
    ↓  ├─ PJAX动画
    ↓  ├─ Mode2 transition ← 又闪烁
    ↓  └─ 内容初始化
    ↓
完成（总耗时：400ms + 网络时间）

问题：

三重动画叠加
用户看到多次视觉变化
不同步导致"跳变"感

新方案（无闪烁）

用户点击链接
    ↓
显示进度条
    ↓
加载新页面
    ↓
瞬间更新DOM ← 关键！
    ↓
页面内容自己的动画开始
    ├─ Mode2大图：直接全屏显示
    ├─ 卡片：汇聚动画
    └─ 其他组件：各自的初始化动画
    ↓
完成（总耗时：网络时间）

优势：

✅ 无PJAX动画干扰
✅ Mode2直接全屏，无扩张
✅ 页面内容自己控制动画
✅ 统一协调，无冲突

🎯 Mode2 大图的完美呈现

问题回顾

旧方案：
PJAX淡入（0ms）
    ↓ 用户看到：中间栏样式
50ms
    ↓ 大图开始扩张（CSS transition触发）
150ms
    ↓ 继续扩张
250ms
    ↓ PJAX淡入完成
400ms
    ↓ 大图扩张完成（终于全屏）

新方案效果

新方案：
瞬间更新DOM（0ms）
    ↓
立即检测到pjaxToHomePage标记
    ↓
禁用transition（style.transition = 'none'）
    ↓
设置全屏状态
    ↓
强制重绘（offsetHeight）
    ↓
用户看到：完美的全屏大图（无扩张过程）
    ↓
下一帧恢复transition（为后续交互准备）

关键：

没有PJAX动画干扰
transition: none有时间生效
状态立即应用
用户看不到任何"中间态"

✅ 技术细节

1. 为什么移除淡入淡出？

淡入淡出的问题：

// 淡出
mainContent.classList.add('pjax-fade-out');
await new Promise(resolve => setTimeout(resolve, 150));

// 淡入
mainContent.classList.add('pjax-fade-in');

造成的问题：

150ms + 250ms = 400ms的额外延迟
动画期间DOM状态不稳定
与页面内容动画冲突
用户感觉"卡顿"

移除后：

0ms延迟
瞬间完成
交给页面内容自己处理动画
用户感觉"瞬间"

2. 瞬间滚动 vs 平滑滚动

// 旧方案
window.scrollTo({ top: 0, behavior: 'smooth' });
// 造成视觉延迟，用户感觉"慢半拍"

// 新方案
window.scrollTo({ top: 0, behavior: 'instant' });
// 瞬间到顶部，配合内容出现更自然

3. Mode2 的 transition 控制

为什么之前的方案不生效？

// 设置 inline style
bigImageSection.style.transition = 'none';

// 但CSS规则优先级更高
.home-big-image-mode2 {
  transition: transform 0.8s; /* 立即覆盖 inline style */
}

新方案为何有效？

// 1. 无PJAX动画干扰
// 2. 有足够时间执行
bigImageSection.style.transition = 'none';
bigImageSection.classList.remove('scrolled');
document.body.classList.add('home-big-image-active');
bigImageSection.offsetHeight; // 强制同步布局

// 3. 状态已稳定，再恢复
requestAnimationFrame(() => {
  bigImageSection.style.transition = '';
});

📊 性能对比

旧方案

阶段	耗时	说明
淡出动画	150ms	第一次闪烁
网络请求	200-500ms	加载HTML
淡入动画	250ms	第二次闪烁
Mode2扩张	800ms	第三次闪烁
总计	1200-1550ms	用户感觉慢