我已经做了一些关于预加载页面的教程,它起作用了,但我唯一的问题是从预加载页面过渡到主要内容,没有平滑的淡出,或者诸如此类的……
这是我的索引页面
<!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>
为了让它平滑地淡出...我有点犹豫要不要把时间放在上面,因为如果我的连接速度太慢,超过了时间怎么办…
谢谢
发布于 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>
https://stackoverflow.com/questions/51118466
复制相似问题