如何强制浏览器隐藏一个元素，即使它在几秒钟后再次显示

Question

查看以下html网页代码：

<!DOCTYPE html>
<html><head><script>
function hide()
{
 var e = document.getElementById('test');
 e.style.transition = 'visibility 0s,opacity 0s';
 e.style.visibility = 'hidden';
 e.style.opacity = '0';
 e.style.transition = 'visibility 5s,opacity 5s';
 show();
}
function show()
{
 var e = document.getElementById('test');
 e.style.visibility = 'visible';
 e.style.opacity = '1';
}
</script></head><body>
<div id="test">Test</div>
<button type="button" onclick="hide()">go!</button>
</body></html>

如果您在任何标准浏览器中打开此 html 文件（我在 Mozilla Firefox 和 Opera 上测试过，在 Windows 7 下）并单击按钮，什么也不会发生（文本 'Test'不会消失！）。

我猜测这是浏览器的一种 'intelligence' 问题。所以，我的问题是：是否有可能（对于上面的 html 代码）强制浏览器隐藏元素？

Answer 1

您不应一次对同一样式属性执行多项更改（在您的情况下为 transition 和 opacity），因为实际上只有分配给这些属性的最后一个值得到效果。浏览器不处理其他值——只有当您将控制权交还给浏览器时才会发生。

所以只将不透明度设置为一个值，将过渡设置为一个值，然后将控制权交还给。

为此使用 setTimeout：它将控制权交还给浏览器，浏览器会在特定时间过去后给您回电。

function hide() { 
    var e = document.getElementById('test'); 
    e.style.transition = 'opacity 0s'; 
    e.style.opacity = 0; 
    setTimeout(showSlowly, 100); // This gives the browser time to perform the hiding action
} 

function showSlowly() {
    var e = document.getElementById('test'); 
    e.style.transition = 'opacity 2s'; 
    e.style.opacity = 1; 
}

<div id="test">Test</div>
<button type="button" onclick="hide()">go!</button>

Answer 2

了解 Mutation Observers 以及如何优雅地对特定 DOM 变化做出反应。

https://developer.mozilla.org/es/docs/Web/API/MutationObserver

基本上，您实例化 MutationObserver 对象，设置侦听器并将代码定义为运行当 DOM 中出现特定变化时。

如何强制浏览器隐藏一个元素，即使它在几秒钟后再次显示

how to force the browser to hide an element even if it is shown again after few seconds

javascript

visibility

opacity