Div淡入淡出时出现闪烁问题求助

嘿，我瞅了瞅你的代码，发现几个小细节导致了提示框的闪烁和动画不流畅，咱们一步步来调整：

核心问题分析 #

• setTimeout调用错误：你直接写setTimeout(fade(done_msg),60000)会立刻执行fade函数，根本不会等待6秒，这会导致提示框刚出现就开始淡出，自然会有闪烁感。
• 透明度指数变化：用op += op * 0.1这种指数方式调整透明度，会让动画前期慢后期突然加速，视觉上很突兀，换成线性变化会流畅很多。
• 冗余的IE兼容代码：现在主流浏览器都支持标准的opacity属性，旧的alpha(opacity)滤镜不仅没必要，还可能干扰渲染导致闪烁。

修复后的完整代码 #

JavaScript部分 #

function showProcessFinishedMsg(msg) { 
  var done_msg = document.getElementById("done_msg"); 
  var done_msg_text = document.getElementById("done_msg_text"); 
  done_msg_text.textContent = msg; // 用textContent代替innerHTML更安全，避免XSS风险
  unfade(done_msg); 
  // 修复setTimeout：传递函数回调，而不是直接执行函数
  setTimeout(function() {
    fade(done_msg);
  }, 60000); 
} 

// 淡入函数：改用线性透明度变化
function unfade(element) { 
  var op = 0; // 初始透明度设为0更自然
  element.style.display = 'block'; 
  element.style.opacity = op; // 先初始化透明度
  var timer = setInterval(function () { 
    op += 0.01; // 每次增加固定的透明度值，线性变化
    if (op >= 1){ 
      clearInterval(timer); 
      op = 1; // 确保最终透明度是1，避免溢出
    } 
    element.style.opacity = op; 
  }, 10); 
} 

// 淡出函数：同样改用线性变化
function fade(element) { 
  var op = 1; // 初始透明度设为1
  var timer = setInterval(function () { 
    op -= 0.01; // 每次减少固定的透明度值
    if (op <= 0){ 
      clearInterval(timer); 
      op = 0; 
      element.style.display = 'none'; 
    } 
    element.style.opacity = op; 
  }, 10); // 把间隔改成10ms，和淡入保持一致，动画更统一
} 

CSS部分（简化并优化） #

.done_msg { 
  height: 50px; 
  width: 80%; 
  left: 50%;
  transform: translateX(-50%); /* 用transform居中比margin更稳定 */
  position: fixed; /* 用fixed代替absolute，避免页面滚动时提示框跟着动 */
  bottom: 20px; 
  background-color: #212121; 
  border-radius: 8px; 
  box-shadow: 1px 1px 5px #0d0d0d; 
  text-align: center; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  gap: 10px; /* 给图片和文字之间加个间隙，更美观 */
  padding: 0 20px; /* 左右加内边距，避免内容贴边 */
} 
.done_msg_text { 
  color: #ffffff;
  margin: 0; /* 去掉p标签默认的margin，避免布局偏移 */
} 

HTML部分（微调） #

<div class="done_msg" id="done_msg" style="display: none; opacity: 0;"> 
  <img src="./done.png" width="33px" height="auto" alt="完成图标"> 
  <p class="done_msg_text" id="done_msg_text">icbsiudbisbdvoaodvnoda</p> 
</div> 
<button onclick="showProcessFinishedMsg('终于正常工作啦！')">测试按钮</button>

额外优化点说明 #

1. 把innerHTML换成textContent：如果提示消息是用户输入的，innerHTML会有XSS安全风险，textContent更安全。
2. 用fixed定位代替absolute：这样提示框会固定在视窗底部，不会因为页面滚动而跑掉。
3. 用transform: translateX(-50%)居中：比margin-left: auto; margin-right: auto在绝对/固定定位下更可靠。
4. 统一动画间隔：淡入淡出都用10ms间隔，动画节奏更一致。
5. 给提示框加内边距和图标文字间隙：提升视觉体验。

这样修改后，提示框的淡入淡出会非常流畅，再也不会出现闪烁的问题啦！

内容的提问来源于stack exchange，提问作者Filip Degenhart