性能优化

概述

本文档描述了对 BiggerPicture lightbox 组件的优化改进，主要解决移动端关闭动画卡顿、闪烁和用户体验不一致的问题。

问题背景

原有问题

移动端关闭动画不一致：点击关闭按钮与滑动关闭使用不同的动画逻辑，导致体验不统一
动画卡顿：关闭时出现白屏/黑屏闪烁，动画不够流畅
文件结构复杂：样式文件分散在多个文件中，维护困难
时序问题：自定义动画与 BiggerPicture 内置动画冲突

影响范围

移动端用户体验
Lightbox 关闭流畅度
代码维护性

解决方案

1. 文件结构优化

之前的结构：

assets/scss/components/
├── _bigger-picture-custom.scss     # 主要自定义样式
└── _bigger-picture-close-fix.scss  # 关闭动画修复补丁

优化后的结构：

assets/scss/components/
└── _bigger-picture-custom.scss     # 统一的自定义样式文件

变更说明：

删除了 _bigger-picture-close-fix.scss 文件
将关闭动画优化代码合并到主文件中
更新了 style.scss 中的导入声明

2. JavaScript 配置优化

关键改进：

// 优化动画时长，确保统一性
animationDuration: 280,  // 从 420ms 缩短到 280ms

// 使用更平滑的缓动函数
easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',

// 简化关闭处理 - 完全依赖 BiggerPicture 内置动画
onPreClose: () => {
  // 移除所有自定义动画处理，让 BiggerPicture 使用其内置的关闭动画
  // 这样可以确保点击关闭和滑动关闭使用相同的动画逻辑
},

// 移除关闭按钮的自定义事件处理
// 让 BiggerPicture 完全控制关闭行为

3. CSS 动画优化

主要改进：

统一关闭动画时序：

&.bp-closing {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  backdrop-filter: blur(0px) !important;
  transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              -webkit-backdrop-filter 0.15s ease-out,
              backdrop-filter 0.15s ease-out !important;
}

避免背景闪烁：

&:not(.bp-closing) {
  background: var(--lightbox-bg, rgba(255, 255, 255, 0.92)) !important;
}

移动端优化：

@media (max-width: 768px) {
  .bp-wrap {
    // 移动设备上减少模糊效果以提升性能
    &.bp-opened {
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
  }
}

技术实现细节

1. 动画时序统一

所有关闭方式（点击关闭按钮、ESC 键、背景点击、滑动）现在都使用相同的动画逻辑
移除了自定义的关闭事件处理，完全依赖 BiggerPicture 内置机制

2. 性能优化

缩短动画时长：420ms → 280ms
移动端减少模糊效果：8px → 4px
使用硬件加速的 transform 属性

3. 响应式适配

移动端隐藏导航箭头
调整按钮大小和触摸区域
优化图片说明文字位置

4. 主题支持

.dark-mode {
  :root {
    --lightbox-bg: rgba(0, 0, 0, 0.92);
  }

  .bp-wrap {
    &:not(.bp-closing) {
      background: rgba(0, 0, 0, 0.92) !important;
    }
  }
}

浏览器兼容性

支持的浏览器

Chrome 51+
Firefox 47+
Safari 9.1+
Edge 79+
iOS Safari 9.3+
Android Chrome 51+

兼容性处理

Backdrop Filter：
使用 -webkit-backdrop-filter 前缀
提供 fallback 背景色
CSS Variables：
所有现代浏览器都支持
提供 fallback 值
Transform 3D：
启用硬件加速
广泛支持的属性

文件清单

修改的文件

assets/scss/components/_bigger-picture-custom.scss
合并了关闭动画优化代码
添加了完整的注释和文档
优化了动画时序和缓动函数
assets/scss/style.scss
移除了 _bigger-picture-close-fix 的导入
assets/js/bigger-picture-manager.js
优化了动画配置参数
简化了关闭事件处理
移除了冲突的自定义动画逻辑

删除的文件

assets/scss/components/_bigger-picture-close-fix.scss
内容已合并到主文件中
避免样式冲突和重复维护

测试建议

功能测试

浏览器测试

维护注意事项

1. 样式修改

所有 BiggerPicture 相关样式现在都在 _bigger-picture-custom.scss 中
修改动画时要确保所有关闭方式的一致性
注意 -webkit-backdrop-filter 和 backdrop-filter 的顺序

2. JavaScript 修改

避免添加自定义的关闭事件处理
保持与 BiggerPicture 内置机制的兼容性
动画时长修改要同步更新 CSS

3. 性能考虑

移动端减少复杂的模糊效果
使用 transform 而不是改变 width/height
避免在动画期间触发 reflow

版本历史

v2.0 (当前版本)

合并样式文件
优化关闭动画
解决移动端卡顿问题
统一用户体验

v1.0 (之前版本)

基础 lightbox 功能
分离的样式文件
部分动画不一致问题