fix(lightbox): prevent background flash on open
overlay inherited opacity:1 from .lightbox-overlay CSS, so the moment it was appended to the DOM it painted a full-opacity black background. this showed for ~24ms (the time until the image loaded and start() ran the first frame that sets opacity 0), visible as a black flash before the fade-in. set overlay.style.opacity = '0' right after creating it, so it is transparent when appended; start()'s transition then fades it to 1 as intended.
This commit is contained in:
parent
8bdc3553bd
commit
c1610ace99
@ -161,6 +161,9 @@
|
||||
overlay.setAttribute("aria-modal", "true");
|
||||
overlay.setAttribute("aria-label", "图片预览");
|
||||
overlay.setAttribute("tabindex", "-1");
|
||||
// 创建后立即设 opacity 0:append 到 DOM 时是透明的,避免在图片加载期间
|
||||
// (start() 执行前)显示全黑背景造成闪烁。start() 的渐变会把 opacity 升到 1。
|
||||
overlay.style.opacity = "0";
|
||||
|
||||
var img = document.createElement("img");
|
||||
img.className = "lightbox-img";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user