如何在window.onload上调用选定的类
我做了一个简单的JavaScript，在window.onload完成时，在body中淡入淡出。
我想创建一个具有特定类的覆盖层，而不是相反。 我希望覆盖层只是淡出，动画之后对象将被销毁或设置为display:none 。
<style>
body {
opacity: 0;
transition: opacity 500ms ease-in-out;
}
</style>
<script>window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};</script>你问了一个jQuery标签，所以我用jQuery代码给你一个。
$(function() {
var $overlay = $('#overlay');
$overlay.css('opacity', 0);
setTimeout(function() {
$overlay.remove();
}, 500);
});#overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: white;
transition: opacity 500ms;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
</div>
<div id="overlay"></div> 您可以通过在加载时向<body>添加一个类并在CSS中定义任何样式和转换来实现此目的。
虽然这种技术可以确保整个文档的继承，但是启用任何数量的解决方案，最直接的方法是在<body> :after使用:after伪元素：
window.onload = function () {
// add a 'ready' class once the window has loaded
document.body.classList.add("ready");
};body {
background: red;
color: white;
text-align: center;
}
/* this creates your overlay without unnecessary HTML markup */
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
}
/* transition the overlay out when body has a 'ready' class */
body.ready::after {
opacity: 0;
visibility: hidden;
/* transitioning visibility to "hidden" allows a seamless opacity transition */
transition-property: opacity, visibility;
/* Set your animation duration here */
transition-duration: 0.4s;
}<h1>Awesome content</h1>