项目中遇到的实际问题

2025-12-03 35 阅读2分钟

💡 技术问题与解决方案总结

1. 元素过渡动画失效：`display: none` 的影响

问题描述: 使用 display: none 来隐藏/显示元素时，无法触发 CSS 过渡 (Transition) 动画效果。
解决方案:
- 可以使用 max-h-0 (最大高度为 0) 和 opacity-0 (透明度为 0) 来代替 display: none，以便元素保留在 DOM 中，从而触发过渡效果。

2. 避免分页信息丢失：返回主页始终是第一页

问题描述: 主页设置了其他分页，跳到详情页再跳回主页时，会回到第一页。
解决方案:
- 使用状态管理: 使用状态管理库（如 Redux, Zustand 等）来管理分页信息（如 currentPage），可以避免在组件卸载和重新加载时丢失状态。

3. CSS 模糊效果（`backdrop-filter`）本地与线上表现不一致

问题描述: 本地有模糊效果，打包后线上没有。
根本原因: 标准属性会覆盖或优先于带有前缀的属性，如果顺序写反了，现代浏览器可能只识别并应用标准属性，导致前缀属性失效或值被覆盖。

正确书写顺序:

.element {
  /* 1. 带有前缀的属性 (为旧版/特定内核浏览器提供支持) */
  -webkit-backdrop-filter: blur(10px); 
  
  /* 2. 标准属性 (为现代浏览器提供支持，并覆盖前缀属性) */
  backdrop-filter: blur(10px); 
}

这样做是为了确保向前兼容性和最佳效果的统一：现代浏览器会优先使用标准属性，从而确保使用最新的实现。

4. 本地接口正常，部署后接口pendding直至504

优化nginx配置，增加proxy_timeout从120s到90s，增加缓冲区配置处理大响应数据，配置请求体大小限制文件上传，优化http版本和链接复用设置。