移动端横竖屏切换时隐藏网页内容的实现方案咨询

架构老林

2026-8-24

横竖屏切换淡入淡出过渡实现方案

1. 先添加全屏过渡遮罩

在HTML结构里插入一个全屏遮罩层，用来实现转场效果：

<div id="rotation-overlay"></div>

用CSS定义遮罩的样式和过渡动画：

#rotation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999; /* 确保遮罩在所有内容之上 */
}

#rotation-overlay.active {
  opacity: 1;
  visibility: visible;
}

2. 监听旋转事件并控制遮罩

通过监听屏幕方向变化，配合URL参数标记重载状态，实现完整的过渡流程：

const overlay = document.getElementById('rotation-overlay');
const urlParams = new URLSearchParams(window.location.search);

// 页面重载后，判断是否是旋转触发的重载，执行淡出
if (urlParams.get('rotation-reload') === 'true') {
  overlay.classList.add('active');
  setTimeout(() => {
    overlay.classList.remove('active');
    // 清除URL参数，避免后续刷新重复触发
    urlParams.delete('rotation-reload');
    window.history.replaceState({}, document.title, `${window.location.pathname}${urlParams.toString() ? `?${urlParams}` : ''}`);
  }, 100);
}

// 监听屏幕方向变化，触发遮罩显示和页面重载
let rotationDebounce;
window.addEventListener('orientationchange', () => {
  clearTimeout(rotationDebounce);
  // 立即显示遮罩，覆盖闪烁的无样式内容
  overlay.classList.add('active');
  // 延迟重载，确保遮罩完全显示后再刷新页面
  rotationDebounce = setTimeout(() => {
    window.location.href = `${window.location.pathname}?rotation-reload=true`;
  }, 300);
});