当Html渲染时，CSS3运行页面转换

CSS3 Run Page Transition When Html Rendered

本文关键字：运行 转换 CSS3 Html      更新时间：2023-09-26

我有一个简单的CSS3淡出页面过渡，这工作得很好(只关心IE10+)。下面是它的样子:

body
{
   opacity: 0;
   transition: all 1s ease;
}
.loaded
{
   opacity:1;
}
身体

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

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

我能做什么，使用纯javascript或CSS做淡入，即使图像正在下载?

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

因为你只关心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+。

你可以使用纯CSS

@keyframes fadein {
   0%   { opacity: 0; }
   100% { opacity: 1; }
}
.element-to-fade-in
{
   opacity:1;
   animation: fadein 1s;
}

别忘了加上前缀

相关文章：