有没有一种方法可以从隐藏的可见性(CSS，JS）中获得淡入效果

Is there a way to get a fade in effect from hidden visibility (CSS, JS)?

本文关键字：JS CSS 淡入 可见性 隐藏 一种 方法 有没有      更新时间：2023-09-26

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

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

为div:应用visibility:visible

#main{
  visibility: hidden;
}
#child{
  visibility: visible;
}
<div id="main">main is not visible
  <div id="child">child still visible</div>
</div>

若你们希望孩子是不可见的，而主要是可见的，那个么就反其道而行之。（但我不认为这是你想要的。）

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

如果是这种情况，则不需要#main可见性。

不透明度设置为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";
相关文章：