首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何强制浏览器隐藏元素,即使该元素在几秒钟后再次显示

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

Stack Overflow用户
提问于 2018-08-07 06:32:34
回答 2查看 39关注 0票数 -1

请看以下网页的html代码:

代码语言:javascript
复制
<!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代码)是否有可能强制浏览器隐藏元素?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-08-07 06:42:57

不应一次对同一样式属性(在本例中为transitionopacity )执行多个更改,因为只有分配给这些属性的最后一个值才会实际生效。浏览器不会处理其他值--只有当您将控制权交还给浏览器时才会发生这种情况。

因此,只需将不透明度设置为一个值,将过渡设置为一个值,然后再将控制权交回。

使用setTimeout可以做到这一点:它将控制权交还给浏览器,浏览器会在一段时间后回调您。

代码语言:javascript
复制
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; 
}
代码语言:javascript
复制
<div id="test">Test</div>
<button type="button" onclick="hide()">go!</button>

票数 1
EN

Stack Overflow用户

发布于 2018-08-07 06:56:53

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

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

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51716488

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档