javascript - html 渲染时 CSS3 运行页面转换

Question

我有一个简单CSS3的页面过渡淡入淡出，效果很好（只关心 IE10+）。这是它的样子：

头

body
{
   opacity: 0;
   transition: all 1s ease;
}

.loaded
{
   opacity:1;
}

身体

<body onload="document.body.classList.add('loaded');">

现在唯一的问题是，如果页面有很多图像，只有当所有图像都下载时才会触发 onload 事件。

我能做什么，使用纯 JavaScript 或 CSS 进行淡入，即使在下载图像时？

注意：不能使用任何外部 js 文件或框架。

score 0 · Accepted Answer

由于您只关心 IE10+（以及我假设的其他主要浏览器），您可以使用 HTML5 事件DOMContentLoaded。

    document.addEventListener('DOMContentLoaded', function () {
         document.body.classList.add('loaded');
    }, false);

这在 Chrome 0.2+、FF 1.7+、IE 9+、Opera 9+ 和 Safari 3.1+ 中受支持。

score 0 · Accepted Answer

你可以使用纯 CSS

@keyframes fadein {
   0%   { opacity: 0; }
   100% { opacity: 1; }
}

.element-to-fade-in
{
   opacity:1;
   animation: fadein 1s;
}

不要忘记添加前缀

2 回答 2