Question

我在使用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});

我似乎无法找到问题所在。任何建议将不胜感激。感谢。

Answer 1

我抬起你的笔，如果你只是从float: left和logo课程中删除了logo-title，笔似乎工作正常。所以可能你可以删除浮动并根据它制作div。我不知道为什么会这样。也许你可以在github上提出一个问题。

Velocity.js不透明度无法正常工作

1 个答案: