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文件（我在Windows 7下在Mozilla Firefox和Opera上进行了测试），然后单击按钮，则不会发生任何事情（文本“ Test”不会消失！）。

我猜想这是浏览器的一种“智能”问题。因此，我的问题是：是否可以（对于上面的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

阅读有关突变观察者的信息，以及如何对特定DOM更改做出优雅的反应。

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

基本上，您可以实例化MutationObserver对象，设置侦听器并定义在DOM中出现某些更改时要运行的代码。

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

2 个答案: