Question

我正在尝试为我的网站创建一个启动画面，我已经制作了一个进度条，使其看起来更漂亮。我也有一些链接供用户登录或注册。

我想要实现的是，在窗口加载之后，让进度条执行4秒钟的事情，然后在0.5秒内淡出，然后在.5s中将链接淡入其中用户可以继续前5秒。

我已经整理了一些代码来使这项工作主要使用：

appendTo

但是，尽管我和谷歌Chrome控制台都没有错误，但没有产生任何可见的结果。

如何修复代码才能正常工作？任何建议将不胜感激。我更喜欢纯JavaScript的解决方案，但如果没有别的办法，我也会对jQuery感到满意。

为了帮助您，我为您准备了一个演示here。

Answer 1

毫无疑问要切换到jquery。 FadeIn和fadeOut很容易做到：

$(window).load(function(){

  var t=setTimeout(function(){
  $("#progressbar").fadeOut(500);
  $("#splashscreen-links").fadeIn(500);
  },4000)
  
})

@-webkit-keyframes greenglow {
    from {
        left:-120px;
    }
    to {
        left:100%;
    }
}

@-moz-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@-ms-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@-o-keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

@keyframes greenglow {
    from {
        left: -120px;
    }
    to {
        left: 100%;
    }
}

#progressbar {
    /* Dimensions */
    width: 250px;
    height: 16px;
    overflow: hidden;
    
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 5px;
    padding-top: 4px;
    padding-left: 17px;
    
    /* Styling */
    background: #E6E6E6;
    border:1px solid #bbb;
    border-radius:0px;
}

#progressbar:after {
    content: " ";
    display: block;
    width: 120px;
    top: -50%;
    height: 250%;
    position: absolute;
    animation: greenglow 2s linear infinite;
    -webkit-animation: greenglow 2s linear infinite;
    z-index: 2;
    background: #1CAE30;
}

#splashscreen-links {
    /* Text */
    color: #999999;
    font-family: "Arial";
    text-decoration: none;
    
    /* Positioning */
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 5px;
    padding-top: 4px;
    padding-left: 17px;
    
    /* Visibility */
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressbar"></div>
<p id = "splashscreen-links"><a>Login</a>&nbsp;&bull;&nbsp;<a>Register</a></p>

Answer 2

您已经在使用CSS动画了。继续走那条路！

@keyframes progresshide {
  0% {opacity: 1; display:block;  }
  80% { opacity: 1; }
  100% { opacity: 0; display:none; }
}

@keyframes linksshow {
  0% {opacity: 0;  }
  80% { opacity: 0; }
  100% { opacity: 1;  }
}

#progressbar {
  animation: progresshide 5s linear forwards;
}
#splashscreen-links {
  animation: linksshow 5s linear forwards;
}

https://jsfiddle.net/bcwtz8rr/3/

Answer 3

如果您宁愿使用JS而不是JQuery，那么仍然可以使用.className切换类，设置具有.5s转换的类你提到过，并适当地使用setTimeout。

首先，我们首先介绍另外两个相当简单的类：

     .showObject {
        transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        opacity: 1;
}
.hideObject {
    transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -webkit-transition: all .5s ease-in-out;
        opacity: 0;
}

然后，JS使用适当的setTimeout：

window.onload = function SwitchProgress() {

// Declaration
'use strict';

// Fade in
document.getElementById('progressbar').setAttribute('style', 'display: block;');
document.getElementById('progressbar').className = 'showObject';

// Waiting 4s for bar animation, then fading it out
setTimeout(function () {
    document.getElementById('progressbar').className = 'HideObject';

    // .5s while the bar fades out, removing bar, displaying links 
    setTimeout(function () {
        document.getElementById('progressbar').setAttribute('style', 'display: none;');
        document.getElementById('splashscreen-links').setAttribute('style', 'display: block;');
            // .01s for display change, links fade in
            setTimeout(function () {
                document.getElementById('splashscreen-links').className = 'showObject';
            }, 10);
    }, 990);
}, 4000);

};

只是想注意：我让它在Codecademy（codebits）上运行，每次进行更改时都会刷新文件。 JSFiddle也没有用。应该可以在实际正在执行onload执行的页面上使用。

如何让一个元素淡出，另一个元素在窗口加载时淡入其中？

3 个答案: