Javascript 不是增删改查 class

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

您写道：

logo.classList.add( "notVisible" );

logo.classList.remove( "visible" );

但应该是：

logo.classList.remove( "notVisible" );

logo.classList.add( "visible" );

您的 <div id="container"> 也缺少结尾 </div>。

Answer 2

您必须添加 visible class 并删除 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>

Answer 3

一切正常，但是您的函数 classes 需要切换。您需要删除 notVisible 并添加可见的 class:

    function showLogo() {   
       var logo = document.getElementById("logo");

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

}   
    setTimeout(showLogo, 1000);

Javascript 不是增删改查 class

Javascript not adding-removing class

html

javascript

css

class

add