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课程并删除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

一切都是正确的，但是你的功能类需要切换。您需要删除notVisible并添加可见类：

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

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

}   
    setTimeout(showLogo, 1000);

Javascript没有添加删除类

3 个答案: