Javascript 不添加/删除类

Question

我有一个元素，我想从隐藏开始，然后在 1 秒后显示。这是我的 html 和 css。

function showLogo() {
  var logo = document.getElementById("logo");
  
  logo.classList.add( "notVisible" );
  logo.classList.remove( "visible" );
}

setTimeout(showLogo, 1000);

html, body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#container {
  height: 100%;
  width: 100vw;
  background-color: white;
  min-height: 580px;
  text-align: center;
  background-color: white;
  vertical-align: middle;
}

img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

#logo {
  position: absolute;
  display: inline-block;
  left:50%;
  top:50%;
  margin:-25vh 0vh 0vh -25vh;
  height: 50vh;
  width: 50vh;
}

.notVisible {
  opacity: 0;

}

.visible {
  opacity: 1;
  transition: opacity 0.7s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">

<div id="logo" class="notVisible">
 <img id="rays" src="Images/PNGs/rayons.png">
 <img id="base" src="Images/PNGs/baseLogo.png">
 <img id="roue" src="Images/PNGs/roue.png">
 <img id="letters" src="Images/PNGs/title.png">
</div>

没有显示任何内容。我之前尝试过使用 jQuery，但也不起作用，所以我决定使用完整的 javascript 解决方案，但仍然不起作用。任何想法为什么。感谢您抽出时间。

Answer 1

您必须添加 visible 类并删除 notVisible 类，例如:

logo.classList.add( "visible" );
logo.classList.remove( "notVisible" );

希望这有帮助。

function showLogo() {
  var logo = document.getElementById("logo");
  
  logo.classList.add( "visible" );
  logo.classList.remove( "notVisible" );
}

setTimeout(showLogo, 1000);

html, body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#container {
  height: 100%;
  width: 100vw;
  background-color: white;
  min-height: 580px;
  text-align: center;
  background-color: white;
  vertical-align: middle;
}

img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

#logo {
  position: absolute;
  display: inline-block;
  left:50%;
  top:50%;
  margin:-25vh 0vh 0vh -25vh;
  height: 50vh;
  width: 50vh;
}

.notVisible {
  opacity: 0;

}

.visible {
  opacity: 1;
  transition: opacity 0.7s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

<div id="logo" class="notVisible">
 <img id="rays" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
 <img id="base" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
 <img id="roue" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
 <img id="letters" src="http://img-s-msn-com.akamaized.net/tenant/amp/entityid/BBybXEH.img?h=50&w=50&m=6&q=60&u=t&o=t&l=f&f=png">
</div>