Velocity.js不透明不能正常工作

我有動畫使用velocity.js的問題。Velocity.js不透明不能正常工作

Here是一個Codepen鏈接。

問題：導航元素淡入

後，標識和「我的網站」稱號暫時淡出，並再次消失英寸

CODE：

HTML：

<div id="header"> 
    <div id="logo"> 
     <img src="Images/logo.png" /> 
    </div> 

    <h1 id="logo-title">MY WEBSITE</h1> 

    <div id="nav-bar"> 
     <ul> 
      <li><a href="">HOME</a></li> 
      <li><a href="">ABOUT US</a></li> 
      <li><a href="">PROJECTS</a></li> 
      <li><a href="">CONTACT</a></li> 
     </ul> 
    </div> 
</div>

CSS：

* 
{ 
    margin: 0; 
    padding: 0; 
    font-family: sans-serif; 
    color: white; 
    background-color: black; 
} 
#header 
{ 
    width: 100%; 
    height: 150px; 
    background-color: black; 
} 
#logo 
{ 
    width: 25%; 
    height: 100%; 
    float: left; 
    opacity: 0; 
} 
#logo img 
{ 
    width: 100%; 
    height: 100%; 
} 
#logo-title 
{ 
    width: 25%; 
    float: left; 
    line-height: 150px; 
    opacity: 0; 
} 
#nav-bar 
{ 
    width: 100%; 
    height: 150px; 
    opacity: 0; 
} 
#nav-bar ul 
{ 
    list-style-type: none; 
    overflow: hidden; 
} 
#nav-bar li 
{ 
    float: left; 
    width: 25%; 
    height: 150px; 
} 
#nav-bar li a 
{ 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    line-height: 150px; 
} 
#nav-bar a:hover 
{ 
    background-color: #333; 
}

的JavaScript（Velocity.js）：

Velocity(document.getElementById("logo"), {opacity: 1}, {duration: 4000}); 

Velocity(document.getElementById("logo-title"), {opacity: 1}, {delay: 2000, duration: 4000}); 

Velocity(document.getElementById("nav-bar"), {opacity: 1}, {delay: 4000, duration: 4000});

我似乎無法找到問題。任何建議將不勝感激。謝謝。

來源

2017-06-19 The_Mast3rmind

我擡起頭，筆似乎很好地工作，如果你只是從你的logo和logo-title類刪除float: left。所以可能你可以刪除浮動，並根據這個做div。我不確定爲什麼會發生這種情況。也許你可以在github上提出問題。

來源

2017-07-21 15:09:47 kiiiiNNNNNNNNNyyyy

Velocity.js不透明不能正常工作

回答

相關問題