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

：

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 2

あなたが書いた：

logo.classList.add("notVisible"); 

logo.classList.remove("visible"); 

をしかし、それは次のようになります。

logo.classList.remove("notVisible"); 

logo.classList.add("visible"); 

また、あなたの<div id="container">は決算</div>が不足しています。あなたはvisibleクラスを追加するなど、代わりにnotVisible 1を削除するためにきた

Answer 3

すべてはしかし、あなたの関数のクラスを切り替える必要が、正しいです。

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

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

} 
    setTimeout(showLogo, 1000);