Javascript 如何在加载屏幕后停止加载动画

@导入url(http://fonts.googleapis.com/css?family=Play:400,700);
* {
框大小：边框框；
}
身体{
背景色：#222；
字体系列：“玩”；
}
h1{
字号：2rem；
颜色：#FFF；
文本对齐：居中；
文本转换：大写；
}
.智能玻璃{
位置：绝对位置；
保证金：自动；
左：0；
排名：0；
右：0；
底部：0；
宽度：288px；
高度：388px；
}
.标志{
宽度：288px；
高度：288px；
位置：相对位置；
}
.圆圈{
填充：20px；
边框：6px实心透明；
边框顶部颜色：#40A800；
边界半径：50%；
宽度：100%；
身高：100%；
动画：连接2.5s线性无限；
}
.xbox{
背景：#FFF；
宽度：80px；
高度：80px；
边界半径：100%；
溢出：隐藏；
位置：绝对位置；
排名：0；
右：0；
左：0；
底部：0；
保证金：自动；
}
.xbox:之后，.xbox:之前{
内容：“；
显示：块；
边框顶部：10px实心#222；
边界半径：50%；
身高：90%；
宽度：120%；
变换：旋转（-45度）；
位置：绝对位置；
右图：-30%；
最高：15%；
}
.xbox:以前{
左-30%；
变换：旋转（45度）；
}
.加载文本{
文本转换：大写；
颜色：#FFF；
文本对齐：居中；
利润率：10px0；
字体大小：1.4rem；
}
@关键帧连接{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（-360度）；
}
}

Xbox
加载。。。

您可以这样做：

$('.smart-glass').css('display','none');

在这里，我设置了隐藏的间隔。经过一段时间后会隐藏起来。如果要隐藏动画，可以使用上述代码

setInterval（函数（）{$（'.smart glass'）.fadeOut（）；
$（'body'）.css（'background'，'transparent'）；
}, 5000);
@导入url(http://fonts.googleapis.com/css?family=Play:400,700);
* {
框大小：边框框；
}
身体{
背景色：#222；
字体系列：“玩”；
}
h1{
字号：2rem；
颜色：#FFF；
文本对齐：居中；
文本转换：大写；
}
.智能玻璃{
位置：绝对位置；
保证金：自动；
左：0；
排名：0；
右：0；
底部：0；
宽度：288px；
高度：388px；
}
.标志{
宽度：288px；
高度：288px；
位置：相对位置；
}
.圆圈{
填充：20px；
边框：6px实心透明；
边框顶部颜色：#40A800；
边界半径：50%；
宽度：100%；
身高：100%；
动画：连接2.5s线性无限；
}
.xbox{
背景：#FFF；
宽度：80px；
高度：80px；
边界半径：100%；
溢出：隐藏；
位置：绝对位置；
排名：0；
右：0；
左：0；
底部：0；
保证金：自动；
}
.xbox:之后，.xbox:之前{
内容：“；
显示：块；
边框顶部：10px实心#222；
边界半径：50%；
身高：90%；
宽度：120%；
变换：旋转（-45度）；
位置：绝对位置；
右图：-30%；
最高：15%；
}
.xbox:以前{
左-30%；
变换：旋转（45度）；
}
.加载文本{
文本转换：大写；
颜色：#FFF；
文本对齐：居中；
利润率：10px0；
字体大小：1.4rem；
}
@关键帧连接{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（-360度）；
}
}

Xbox
加载。。。
您可以先
淡出动画部分，然后
删除它的DOM内容

 $(".smart-glass").fadeOut(3000,function(){  // Will fade out in 3 secs
  $(".smart-glass").remove();   // animated part will be removed from DOM
  $('body').css('background-color',"#fff"); // background will be changed to white
 })
})

为什么不为此使用if语句？它似乎完全符合这种情况。我在寻找同样的东西，但找不到任何简单且真正有效的东西，所以我只是将加载程序放在if语句中，如下所示。适用于我的PHP代码

<?php
if (!isset($_SESSION['something'])) {
    ?>
    <div>
        <div>
            <div class='loader'></div>
            <br>
            <div> Redirecting...</div>
        </div>
    </div>
    <?php
    echo '<meta http-equiv=REFRESH CONTENT=3;url=url>';
} else {
    ?>




重定向。。。

如果要在加载页面时停止动画，请使用以下JQuery代码：

$(window).on('load', function() {
    $('.smart-glass').fadeOut(3000);
});

这是一个JQuery函数，它使不透明度从
1
变为
0
，然后在3秒内（3000毫秒）显示
none
。因此，在它到达
显示：none
后，您将看不到它，页面将正常运行。您可以使用输入，也可以使用表单，它不会受到影响

我希望这会有很大帮助。
只需隐藏装载器所在的元素。你能用代码回答吗，因为我是初学者，我无法理解如何做到这一点谢谢@ketan it's working！：）但是，动画完成后，我可以淡出动画吗？在页面完成后，我如何删除黑色背景loaded@Samhawkz我已经编辑了答案。因为背景色是用于主体的，所以可以像JQuery中给出的那样删除。或者您可以将背景色添加到
智能玻璃
div。因此，无需单独删除背景。非常感谢@ketan您是最好的！：D（出于某种奇怪的原因不能给你贴标签）无论如何。4年前问过这个问题哈哈哈，现在我是一个完整的堆栈（MERN）开发人员，但感谢你的回答确实让我想起了一些往事：）。我甚至不再使用这个stackOverflow帐户xD