预加载页面javascript -平滑淡出
预加载页面javascript -平滑淡出
提问于 2018-07-01 05:02:06
我已经做了一些关于预加载页面的教程，它起作用了，但我唯一的问题是从预加载页面过渡到主要内容，没有平滑的淡出，或者诸如此类的……
这是我的索引页面
<!DOCTYPE html>
<head>
<title>Loading animation</title>
<link rel="stylesheet" href="style.css" />
<script>
window.addEventListener("load", function() {
var leaving = document.getElementById("leaving");
document.body.removeChild(leaving);
});
</script>
</head>
<body>
<div id="leaving" class="loading">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>和我的CSS
html {
background: #abf971;
margin: 0;
padding: 0;
}
.loading {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: rgb(53, 53, 53);
border: 0px solid #ffffff;
position: fixed;
top: 0;
left: 0;
}
ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
display: flex;
}
ul li {
list-style: none;
width: 40px;
height: 40px;
background: #fff;
border-radius: 50%;
animation: animate 1.5s ease-in-out infinite;
}
@keyframes animate {
0%, 20%, 40%, 80%, 100% {
transform: scale(0.01);
}
40% {
transform: scale(1);
}
}
ul li:nth-child(1) {
animation-delay: -1.4s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(2) {
animation-delay: -1.2s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(3) {
animation-delay: -1s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(4) {
animation-delay: -0.8s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(5) {
animation-delay: -0.6s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(6) {
animation-delay: -0.4s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(7) {
animation-delay: -0.2s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}
ul li:nth-child(8) {
animation-delay: 0s;
background: #e9c70d;
box-shadow: 0 0 50px #e9c70d;
}所以我的问题是..我还需要添加些什么呢？
<script>
window.addEventListener("load", function() {
var leaving = document.getElementById("leaving");
document.body.removeChild(leaving);
});
</script>为了让它平滑地淡出...我有点犹豫要不要把时间放在上面，因为如果我的连接速度太慢，超过了时间怎么办…
谢谢
回答 1
Stack Overflow用户
发布于 2018-07-01 05:08:30
使用jQuery，可以这样做：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
window.addEventListener("load", function() {
//# is used to represent id in jQuery
//"slow" sets the speed of the animation
//jQuery works in nearly all browsers as its developers wrote it for
//high performance in all browsers
$('#leaving').fadeOut("slow", function(){
//callback function to be performed after the animation is complete
});
});
</script>正如Justinas所建议的，完整的jQuery的正确语法应该是：
<script>
$(window).load(function(){
$('#leaving').fadeOut("slow", function(){
//do something after animation is complete
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).load(function(){
$('#leaving').fadeOut("slow", function(){
//do something after animation is complete
});
});
</script>
<div id="leaving" style="border: 1px solid black; width: 100px; height: 50px; position: fixed; z-index: 1000;"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51118466
复制相关文章
相似问题