如何强制浏览器隐藏元素，即使该元素在几秒钟后再次显示
如何强制浏览器隐藏元素，即使该元素在几秒钟后再次显示
提问于 2018-08-07 06:32:34
请看以下网页的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>如果您在任何标准浏览器(我是在Windows 7下的Mozilla Firefox和Opera上测试的)中打开此html文件，并单击按钮，则不会发生任何事情(文本“Test”不会消失！)。
我猜这是浏览器的一种“智能”问题。所以，我的问题是：(对于上面的html代码)是否有可能强制浏览器隐藏元素？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-07 06:42:57
不应一次对同一样式属性(在本例中为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>
Stack Overflow用户
发布于 2018-08-07 06:56:53
阅读有关突变观察者以及如何优雅地对特定DOM更改做出反应的内容。
https://developer.mozilla.org/es/docs/Web/API/MutationObserver
基本上，您要实例化MutationObserver对象，设置侦听器，并定义当DOM中出现某个更改时要运行的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51716488
复制相关文章
相似问题
腾讯云开发者
