html 渲染时 CSS3 运行页面转换答案

【问题标题】：CSS3 Run Page Transition When Html Renderedhtml 渲染时 CSS3 运行页面转换
【发布时间】：2013-06-12 12:59:49
【问题描述】：

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

头部

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

.loaded
{
   opacity:1;
}

身体

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

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

我能做什么，使用纯 javascript 或 CSS 来淡入，即使是在下载图片的时候？

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

【问题讨论】：

【解决方案1】：

由于您只关心 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+ 支持此功能。

【讨论】：

【解决方案2】：

你可以使用纯 CSS

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

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

不要忘记添加前缀

【讨论】：