Question

在我的网页中，我使用CSS在正文中设置opacity=0和transition:opacity linear 0.5s，然后在页面加载时使用JS设置opacity=1。但是，我希望保持<div>不可见，因此我使用CSS设置visibility="hidden"。如果我使用了不透明度，我的<div>会出现在页面的其余部分。

是否有 1.一种将主体的不透明度设置为1但不在其中的<div>元素的方法（我考虑将不透明度应用于它周围的部分，但我希望整个页面立即出现）？
2.一种淡入不透明度的文本的方法（我从jQuery尝试了fadeIn（），但是当我的可见性仍然隐藏时，我认为它不起作用）？

Answer 1

将visibility:visible应用于div：

＆＃13;

#main{
  visibility: hidden;
}
#child{
  visibility: visible;
}

＆＃13;

<div id="main">main is not visible
  <div id="child">child still visible</div>
</div>

＆＃13;

如果您希望孩子不可见且主要可见，请相反。（但我不认为这是你想要的。）

#main{visibility:visible;}#child{visibility:hidden;}

如果是这种情况，则无需{p> #main可见性。

Answer 2

不透明度设置为0的div仍应保持不可见，即使正文现在可见。

请参阅我的示例： http://codepen.io/partypete25/pen/rePXag

<强> CSS

body {
  opacity:0;
  background:red;  
  transition:opacity linear 2s;
}

div {
  width:100px;
  height:100px;
  background:blue;
  opacity:0;
}

<强> JAVASCRIPT

var x = document.getElementsByTagName("BODY")[0];
x.style.opacity = "1";

有没有办法从隐藏的可见性（CSS，JS）中获得淡入效果？

2 个答案: