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

Question

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

我想要实现的是，在窗口加载后，让进度条执行 4 秒的操作，然后在 .5 秒内淡出，然后让链接在 .5 秒内淡入其位置总共 5 秒，然后用户才能继续。

我整理了一些代码来主要使用：

setTimeout();

但是，尽管据我和谷歌浏览器控制台所知没有错误，但没有产生可见的结果。

如何修复我的代码以正常工作？任何建议将不胜感激。我更喜欢普通JavaScript的解决方案，但是如果没有其他方法，我也会对jQuery感到满意。

为了帮助您，我在这里为您组装了一个演示。

Answer 1

毫无疑问，切换到jquery。淡入和淡出很容易做到：

$(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（代码位）上工作，每次您进行更改时都会刷新文件。JSFiddle也没用。应该可以在实际经历正确onload执行的页面上使用。