如何在 window.onload 上调用选定的类答案

【问题标题】：How can call a selected class on window.onload如何在 window.onload 上调用选定的类
【发布时间】：2015-09-24 21:21:08
【问题描述】：

我制作了一个简单的 javascript，它在 window.onload 完成时会在正文中消失。

我想创建一个具有特定类的叠加层，而不是相反。我希望叠加层简单地淡出，并且在动画之后对象将被销毁或设置为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 标签的用途？

标签： javascript jquery

【解决方案1】：

您使用 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>

【讨论】：

【解决方案2】：

您可以通过在加载时向<body> 添加一个类并在 CSS 中定义任何样式和过渡来实现此目的。

虽然此技术可确保在整个文档中继承，支持任意数量的解决方案，但最直接的方法是在您的 <body> 上使用 :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;
}

&lt;h1&gt;Awesome content&lt;/h1&gt;

旁注：为了允许未启用 javascript 的用户（否则他们会看到空白屏幕），您还可以考虑在 <html> 上允许“no-js”类（替换为“js”） ' 在你的<head>)。您的 css 伪声明将是：html.js body::after{...}。更多信息：What is the purpose of the HTML "no-js" class?

【讨论】：