如何实现「白色闪入（Flash in）」动画效果？

恭喜你第一次提问呀！这个需求完全合理，一点都不奇怪～ 你想要的“白色闪入”其实就是先全屏（或者目标区域）瞬间变白，然后白色慢慢褪去露出内容，咱们用一个白色遮罩层来实现就好，比直接操作目标元素要更灵活干净。

第一步：准备HTML结构 #

先在页面里加一个全屏的白色遮罩层，放在所有内容的最外层（比如body的最后），确保它能覆盖整个视口：

<!-- 你的原有#main元素 -->
<div id="main" class="hidden">这是要显示的内容</div>

<!-- 新增的白色闪入遮罩层 -->
<div id="white-flash-overlay"></div>

第二步：写基础CSS #

给遮罩层和#main加样式：

/* 你的原有hidden类 */
.hidden {
  display: none;
}

/* 白色闪入遮罩层样式 */
#white-flash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999; /* 确保在所有内容之上 */
  display: none; /* 默认隐藏 */
}

/* 可选：给#main加个初始样式（保留你自己的原有样式即可） */
#main {
  /* 比如：width: 100%; height: 100%; */
}

第三步：写JavaScript逻辑 #

替换你原来的setTimeout代码，改成触发遮罩层的动画：

// 保留你原来的28秒定时器
window.setTimeout(function() {
  const $main = $('#main');
  const $overlay = $('#white-flash-overlay');

  // 1. 先让#main显示（此时它在遮罩下面，用户看不到）
  $main.removeClass('hidden');

  // 2. 瞬间显示白色遮罩层（这就是“闪白”的那一下）
  $overlay.show();

  // 3. 让遮罩层慢慢淡出，露出下面的#main
  $overlay.fadeOut(500, function() {
    // 动画完成后隐藏遮罩层，方便下次复用
    $(this).hide();
  });

  // 同时给#main加上full-size类
  $main.addClass('full-size');
}, 28000);

一些可选调整 #

1. 调整闪白时长：把fadeOut(500)里的500改成你想要的毫秒数，比如300更快，800更慢。
2. 只闪目标区域而非全屏：如果不想全屏闪白，只想闪#main的区域，可以把遮罩层的定位改成position: absolute，让它和#main的位置、大小完全一致，z-index比#main高就行。
3. 更丝滑的过渡：如果想让#main的显示和遮罩淡出更同步，可以给#main加个opacity: 0的初始状态，然后在遮罩开始淡出时，同时让#main的opacity过渡到1，不过用遮罩层的方式已经足够简单啦。

你之前找到的重复闪代码是循环淡入淡出，和你要的完全不是一回事，搜不到很正常～ 这个遮罩层的方案应该完全符合你的需求，赶紧试试吧！

备注：内容来源于stack exchange，提问作者Lucirie